fix: getRenderer could be null before canvas init (#1254)

* ci: update label and release action config

.codecheck/check.yml

@@ -8,4 +8,4 @@ tool_params:
   secsolar:
     source_dir: ./
   cmetrics:
-    exclude: vite.config.js|package.json|index.js|mockServer/assets|packages/vue-generator/test
+    exclude: vite.config.js|package.json|index.js|axios.js|.eslintrc.js|mockServer|packages/vue-generator/test|packages/vue-generator/src/templates|packages/build/vite-plugin-meta-comments/src/test

.eslintignore

@@ -1,9 +0,0 @@
-.vscode
-dist
-public
-package-lock.json
-**/node_modules/**
-tmp
-temp
-mockServer
-packages/vue-generator/**/output/**

.eslintrc.js

@@ -1,31 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2015: true,
-    worker: true,
-    node: true,
-    jest: true
-  },
-  extends: ['eslint:recommended', 'plugin:vue/vue3-essential'],
-  parser: 'vue-eslint-parser',
-  parserOptions: {
-    parser: '@babel/eslint-parser',
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    requireConfigFile: false,
-    babelOptions: {
-      parserOpts: {
-        plugins: ['jsx']
-      }
-    }
-  },
-  plugins: ['vue'],
-  rules: {
-    'no-console': 'error',
-    'no-debugger': 'error',
-    'space-before-function-paren': 'off',
-    'vue/multi-word-component-names': 'off',
-    'no-use-before-define': 'error',
-    'no-unused-vars': ['error', { ignoreRestSiblings: true, varsIgnorePattern: '^_', argsIgnorePattern: '^_' }]
-  }
-}

.github/auto-labeler.yml

@@ -0,0 +1,56 @@
+version: v1
+
+labels:
+  - label: 'ignore-for-release'
+    sync: true
+    matcher:
+      title: '^[vV]?\d+(\.\d+){2}.*'
+      body: '#ignore'
+  - label: 'breaking-change'
+    sync: true
+    matcher:
+      title: '^.+!:|#breaking'
+      body: '#breaking'
+  - label: 'enhancement'
+    sync: true
+    matcher:
+      title: '^[fF]eat.*'
+  - label: 'bug'
+    sync: true
+    matcher:
+      title: '^[fF]ix.*'
+  - label: 'documentation'
+    sync: true
+    matcher:
+      title: '^[dD](ocs|ocumentation).*'
+      files: 'docs/**/*.md'
+  - label: 'refactoring'
+    sync: true
+    matcher:
+      title: '^[rR]efactor.*'
+  - label: 'test'
+    sync: true
+    matcher:
+      title: '^[tT]est.*'
+      files: '**/__tests__/**'
+  - label: 'chore'
+    sync: true
+    matcher:
+      title: '^[cC]hore.*'
+  - label: 'ci'
+    sync: true
+    matcher:
+      title: '^[cC]i.*'
+      files: '.github/**'
+  - label: 'ospp'
+    sync: true
+    matcher:
+      baseBranch: '^ospp-\d+\/.*'
+  - label: '1.x'
+    sync: true
+    matcher:
+      baseBranch: '^v1\.x'
+  - label: 'release'
+    sync: true
+    matcher:
+      baseBranch: '^release\/v2.*'

.github/release.yml

@@ -2,8 +2,6 @@ changelog:
   exclude:
     labels:
       - ignore-for-release
-    authors:
-      - allcontributors[bot]
   categories:
     - title: Breaking Changes 🛠
       labels:
@@ -18,9 +16,16 @@ changelog:
       labels:
         - Semver-Patch
         - bug
-    - title: Other Changes
+    - title: "📖 Documentation"
       labels:
         - documentation
+    - title: "🔧 Maintenance"
+      labels:
         - refactoring
+        - test
         - unit-test
+        - chore
         - ci
+    - title: "Other Changes"
+      labels: ["*"]
+      collapse: true

.github/workflows/Release.yml

@@ -0,0 +1,76 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  release:
+    if: github.repository == 'opentiny/tiny-engine'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      id-token: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+          run_install: false
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Run Build
+        run: pnpm run build:plugin && pnpm run build:alpha > /tmp/build-alpha.log 2>&1
+
+      - name: Upload build logs
+        uses: actions/upload-artifact@v4
+        with:
+          name: build-alpha-log
+          path: /tmp/build-alpha.log
+
+      - name: Parse Publish tag
+        id: parse_tag
+        run: |
+          tag_name="${GITHUB_REF#refs/tags/}"
+          if [[ "$tag_name" == *alpha* ]]; then
+            echo "dist_tag=alpha" >> "$GITHUB_OUTPUT"
+          elif [[ "$tag_name" == *beta* ]]; then
+            echo "dist_tag=beta" >> "$GITHUB_OUTPUT"
+          elif [[ "$tag_name" == *rc* ]]; then
+            echo "dist_tag=rc" >> "$GITHUB_OUTPUT"
+          else
+            echo "dist_tag=latest" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Verify clean working directory
+        run: |
+          if [[ -n "$(git status --porcelain)" ]]; then
+            echo "Working directory is not clean"
+            exit 1
+          fi
+
+      - name: Verify package version match tag
+        run: |
+          tag_name="${GITHUB_REF#refs/tags/}"
+          package_version=$(pnpm lerna list --scope=@opentiny/tiny-engine --json | jq -r '.[0].version')
+          if [[ "$tag_name" != "v$package_version" ]]; then
+            echo "Tag name $tag_name does not match package version $package_version"
+            exit 1
+          fi
+
+      - name: Publish package to npm
+        run: pnpm lerna publish from-package --dist-tag ${{steps.parse_tag.outputs.dist_tag}} --yes
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/auto-labeler.yml

@@ -0,0 +1,19 @@
+name: Pull Request Auto Labeler
+
+on:
+  pull_request_target:
+    types: [opened, edited]
+
+permissions:
+  # Setting up permissions in the workflow to limit the scope of what it can do. Optional!
+  contents: read # the config file
+  pull-requests: write # for labeling pull requests (on: pull_request_target or on: pull_request)
+
+jobs:
+  label:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: fuxingloh/multi-labeler@v4
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }} # optional, default to '${{ github.token }}'
+          config-path: .github/auto-labeler.yml # optional, default to '.github/labeler.yml'

.github/workflows/push-check.yml

@@ -4,33 +4,40 @@ on:
   push:
     branches: []
   pull_request:
-    branches: [develop,main]
+    branches: [develop, main, refactor/develop, release/*]
 
 jobs:
   push-check:
-    runs-on: ubuntu-latest  # windows-latest || macos-latest
-    
+    runs-on: ubuntu-latest # windows-latest || macos-latest
+
     steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 18
-        
-    - name: Install pnpm
-      run: npm i -g pnpm
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
 
-    - name: Install dependencies
-      run: pnpm i
+      - name: Install dependencies
+        run: pnpm i
 
-    - name: Get changed files
-      id: get_changed_files
-      uses: tj-actions/changed-files@v41
-      with:
-        files: |
-              **.js
-              **.vue
-              **.jsx
-    - name: Run ESLint
-      run: npx eslint ${{steps.get_changed_files.outputs.all_changed_files}}
-    - name: Run Build
-      run: pnpm run build:plugin && pnpm run build:alpha
+      - name: Get changed files
+        id: get_changed_files
+        uses: tj-actions/changed-files@v41
+        with:
+          files: |
+            **.js
+            **.vue
+            **.jsx
+      - name: Run ESLint
+        run: npx eslint ${{steps.get_changed_files.outputs.all_changed_files}}
+      - name: Run Build
+        run: pnpm run build:plugin && pnpm run build:alpha > build-alpha.log 2>&1
+
+      - name: Upload build logs
+        uses: actions/upload-artifact@v4
+        with:
+          name: build-alpha-log
+          path: build-alpha.log

.prettierrc

@@ -1,5 +1,7 @@
-semi: false
-singleQuote: true
-printWidth: 120
-trailingComma: 'none'
-endOfLine: 'auto'
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 120,
+  "trailingComma": "none",
+  "endOfLine": "auto"
+}

designer-demo/engine.config.js

@@ -0,0 +1,7 @@
+export default {
+  id: 'engine.config',
+  theme: 'light',
+  material: ['/mock/bundle.json'],
+  scripts: [],
+  styles: []
+}

designer-demo/env/.env.alpha

@@ -1,7 +1,10 @@
 # alpha mode, used by the "build:alpha" script
 
 NODE_ENV=production
-VITE_CDN_DOMAIN=https://unpkg.com
+# VITE_CDN_DOMAIN=https://unpkg.com
+VITE_CDN_DOMAIN=https://registry.npmmirror.com
+# 使用npmmirror的cdn 时，需要声明 VITE_CDN_TYPE=npmmirror
+VITE_CDN_TYPE=npmmirror
 VITE_LOCAL_IMPORT_MAPS=false
 VITE_LOCAL_BUNDLE_DEPS=false
 # VITE_ORIGIN=

designer-demo/env/.env.development

@@ -1,7 +1,10 @@
 # development mode, used by the "vite" command
 
 NODE_ENV=development
-VITE_CDN_DOMAIN=https://unpkg.com
+# VITE_CDN_DOMAIN=https://unpkg.com
+VITE_CDN_DOMAIN=https://registry.npmmirror.com
+# 使用npmmirror的cdn 时，需要声明 VITE_CDN_TYPE=npmmirror
+VITE_CDN_TYPE=npmmirror
 VITE_LOCAL_IMPORT_MAPS=false
 VITE_LOCAL_BUNDLE_DEPS=false
 # request data via alpha service

designer-demo/env/.env.production

@@ -0,0 +1,10 @@
+# prod mode, used by the "build:prod" script
+
+NODE_ENV=production
+# VITE_CDN_DOMAIN=https://unpkg.com
+VITE_CDN_DOMAIN=https://registry.npmmirror.com
+# 使用npmmirror的cdn 时，需要声明 VITE_CDN_TYPE=npmmirror
+VITE_CDN_TYPE=npmmirror
+VITE_LOCAL_IMPORT_MAPS=false
+VITE_LOCAL_BUNDLE_DEPS=false
+#VITE_ORIGIN=

designer-demo/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

designer-demo/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "designer-demo",
+  "private": true,
+  "version": "2.4.0",
+  "type": "module",
+  "scripts": {
+    "dev": "cross-env vite",
+    "build:alpha": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build --mode alpha",
+    "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build"
+  },
+  "dependencies": {
+    "@opentiny/tiny-engine": "workspace:^",
+    "@opentiny/tiny-engine-utils": "workspace:*",
+    "@opentiny/vue": "~3.20.0",
+    "@opentiny/vue-design-smb": "~3.20.0",
+    "@opentiny/vue-icon": "~3.20.0",
+    "@opentiny/vue-locale": "~3.20.0",
+    "@opentiny/vue-renderless": "~3.20.0",
+    "@opentiny/vue-theme": "~3.20.0",
+    "@vueuse/core": "^9.6.0",
+    "vue": "^3.4.21"
+  },
+  "devDependencies": {
+    "@opentiny/tiny-engine-mock": "workspace:^",
+    "@opentiny/tiny-engine-vite-config": "workspace:^",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "cross-env": "^7.0.3",
+    "vite": "^5.4.2"
+  }
+}

designer-demo/preview.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="./src/preview/src/main.js"></script>
+    <script type="module" src="/src/preview.js"></script>
   </body>
 </html>

designer-demo/registry.js

@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) 2024 - present TinyEngine Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+import {
+  Breadcrumb,
+  Fullscreen,
+  Lang,
+  ViewSetting,
+  Logo,
+  Lock,
+  Media,
+  Redoundo,
+  Save,
+  Clean,
+  ThemeSwitch,
+  Preview,
+  GenerateCode,
+  Refresh,
+  Collaboration,
+  Materials,
+  State,
+  Script,
+  Tree,
+  Help,
+  Schema,
+  Page,
+  I18n,
+  Bridge,
+  Block,
+  Datasource,
+  Robot,
+  Props,
+  Events,
+  Styles,
+  Layout,
+  Canvas,
+  GenerateCodeService,
+  GlobalService,
+  ThemeSwitchService
+} from '@opentiny/tiny-engine'
+import engineConfig from './engine.config'
+import { HttpService } from './src/composable'
+
+export default {
+  root: {
+    id: 'engine.root',
+    metas: [HttpService, GenerateCodeService, GlobalService, ThemeSwitchService] // GlobalService 依赖 HttpService，HttpService需要在前面处理
+  },
+  config: engineConfig,
+  layout: {
+    ...Layout,
+    options: {
+      ...Layout.options,
+      isShowLine: true,
+      isShowCollapse: true,
+      toolbars: {
+        left: ['engine.toolbars.breadcrumb', 'engine.toolbars.lock', 'engine.toolbars.logo'],
+        center: ['engine.toolbars.media'],
+        right: [
+          ['engine.toolbars.themeSwitch', 'engine.toolbars.redoundo', 'engine.toolbars.clean'],
+          ['engine.toolbars.preview'],
+          ['engine.toolbars.generate-code', 'engine.toolbars.save']
+        ],
+        collapse: [
+          ['engine.toolbars.collaboration'],
+          ['engine.toolbars.refresh', 'engine.toolbars.fullscreen'],
+          ['engine.toolbars.lang'],
+          ['engine.toolbars.viewSetting']
+        ]
+      }
+    }
+  },
+  themes: [
+    {
+      id: 'engine.theme.light'
+    },
+    {
+      id: 'engine.theme.dark'
+    }
+  ],
+  toolbars: [
+    ThemeSwitch,
+    Logo,
+    Breadcrumb,
+    Lock,
+    Media,
+    Redoundo,
+    Collaboration,
+    Clean,
+    Preview,
+    Refresh,
+    GenerateCode,
+    Save,
+    Fullscreen,
+    Lang,
+    ViewSetting
+  ],
+  plugins: [
+    Materials,
+    Tree,
+    Page,
+    [Block, { options: { ...Block.options, mergeCategoriesAndGroups: true } }],
+    Datasource,
+    Bridge,
+    I18n,
+    Script,
+    State,
+    Schema,
+    Help,
+    Robot
+  ],
+  dsls: [{ id: 'engine.dsls.dslvue' }],
+  settings: [Props, Styles, Events],
+  canvas: Canvas
+}

designer-demo/src/composable/http/index.js

@@ -0,0 +1,135 @@
+import { createApp } from 'vue'
+import { HttpService } from '@opentiny/tiny-engine'
+import { useBroadcastChannel } from '@vueuse/core'
+import { constants } from '@opentiny/tiny-engine-utils'
+import Login from './Login.vue'
+
+const LOGIN_EXPIRED_CODE = 401
+const { BROADCAST_CHANNEL } = constants
+
+const { post: globalNotify } = useBroadcastChannel({ name: BROADCAST_CHANNEL.Notify })
+
+const procession = {
+  promiseLogin: null,
+  mePromise: {}
+}
+let loginVM = null
+
+const showError = (url, message) => {
+  globalNotify({
+    type: 'error',
+    title: '接口报错',
+    message: `报错接口: ${url} \n报错信息: ${message ?? ''}`
+  })
+}
+
+const preRequest = (config) => {
+  const isDevelopEnv = import.meta.env.MODE?.includes('dev')
+
+  if (isDevelopEnv && config.url.match(/\/generate\//)) {
+    config.baseURL = ''
+  }
+
+  const isVsCodeEnv = window.vscodeBridge
+
+  if (isVsCodeEnv) {
+    config.baseURL = ''
+  }
+
+  return config
+}
+
+const preResponse = (res) => {
+  if (res.data?.error) {
+    showError(res.config?.url, res?.data?.error?.message)
+
+    return Promise.reject(res.data.error)
+  }
+
+  return res.data?.data
+}
+
+const openLogin = () => {
+  if (!window.lowcode) {
+    const loginDom = document.createElement('div')
+    document.body.appendChild(loginDom)
+    loginVM = createApp(Login).mount(loginDom)
+
+    window.lowcode = {
+      platformCenter: {
+        Session: {
+          rebuiltCallback: function () {
+            loginVM.closeLogin()
+
+            procession.mePromise.resolve('login ok')
+            procession.promiseLogin = null
+            procession.mePromise = {}
+          }
+        }
+      }
+    }
+  }
+
+  return new Promise((resolve, reject) => {
+    if (!procession.promiseLogin) {
+      procession.promiseLogin = loginVM.openLogin(procession, '/api/rebuildSession')
+      procession.promiseLogin.then((response) => {
+        HttpService.apis.request(response.config).then(resolve, reject)
+      })
+    }
+  })
+}
+
+const errorResponse = (error) => {
+  // 用户信息失效时，弹窗提示登录
+  const { response } = error
+
+  if (response?.status === LOGIN_EXPIRED_CODE) {
+    // vscode 插件环境弹出输入框提示登录
+    if (window.vscodeBridge) {
+      return Promise.resolve(true)
+    }
+
+    // 浏览器环境弹出小窗登录
+    if (response?.headers['x-login-url']) {
+      return openLogin()
+    }
+  }
+
+  showError(error.config?.url, error?.message)
+
+  return response?.data.error ? Promise.reject(response.data.error) : Promise.reject(error.message)
+}
+
+const getConfig = (env = import.meta.env) => {
+  const baseURL = env.VITE_ORIGIN
+  // 仅在本地开发时，启用 withCredentials
+  const dev = env.MODE?.includes('dev')
+  // 获取租户 id
+  const getTenant = () => new URLSearchParams(location.search).get('tenant')
+
+  return {
+    baseURL,
+    withCredentials: dev,
+    headers: {
+      ...(dev && { 'x-lowcode-mode': 'develop' }),
+      'x-lowcode-org': getTenant()
+    }
+  }
+}
+
+const customizeHttpService = () => {
+  const options = {
+    axiosConfig: getConfig(),
+    interceptors: {
+      request: [preRequest],
+      response: [[preResponse, errorResponse]]
+    }
+  }
+
+  HttpService.apis.setOptions(options)
+
+  return HttpService
+}
+
+export default customizeHttpService()

designer-demo/src/composable/index.js

@@ -0,0 +1 @@
+export { default as HttpService } from './http'

designer-demo/src/configurators/MyInputConfigurator.vue

@@ -0,0 +1,63 @@
+<template>
+  <span>我是自定义的 input configurator</span>
+  <tiny-input v-model="value" :type="type" :placeholder="placeholder" :rows="rows" @update:modelValue="change">
+  </tiny-input>
+</template>
+
+<script>
+import { ref } from 'vue'
+import { Input } from '@opentiny/vue'
+
+export default {
+  name: 'MyInputConfigurator',
+  components: {
+    TinyInput: Input
+  },
+  props: {
+    modelValue: {
+      type: String
+    },
+    type: {
+      type: String
+    },
+    placeholder: {
+      type: String
+    },
+    suffixIcons: {
+      type: Array,
+      default: () => []
+    },
+    dataType: {
+      type: String
+    },
+    rows: {
+      type: Number,
+      default: 10
+    }
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const value = ref(props.modelValue)
+
+    const change = (val) => {
+      emit('update:modelValue', props.dataType === 'Array' ? val.split(',') : val)
+    }
+
+    return {
+      value,
+      change
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-svg-size {
+  margin-left: 10px;
+  font-size: 16px;
+  &:hover {
+    cursor: pointer;
+    color: var(--te-common-text-primary);
+  }
+}
+</style>

designer-demo/src/configurators/index.js

@@ -0,0 +1,5 @@
+import MyInputConfigurator from './MyInputConfigurator.vue'
+
+export const configurators = {
+  MyInputConfigurator
+}

designer-demo/src/defineEntry.js

@@ -10,9 +10,9 @@
  *
  */
 
-import { useHttp } from '@opentiny/tiny-engine-http'
+import registry from '../registry.js'
+import { defineEntry } from '@opentiny/tiny-engine'
 
-const http = useHttp()
+defineEntry(registry)
 
-// 注销
-export const requestLogout = () => http.post(`platform-center/api/logout`)
+export { registry }

designer-demo/src/main.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+// 导入@opentiny/tiny-engine时，内部的依赖包也会逐个导入，可能会执行useComplie，此时需要templateHashMap。所以需要先执行一次defineEntry
+import { registry } from './defineEntry.js'
+import { init } from '@opentiny/tiny-engine'
+import { configurators } from './configurators/'
+import 'virtual:svg-icons-register'
+
+init({
+  registry,
+  configurators,
+  createAppSignal: ['global_service_init_finish']
+})

designer-demo/src/preview.js

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+import { initHook, HOOK_NAME, GenerateCodeService, Breadcrumb, Media, Lang } from '@opentiny/tiny-engine'
+import { initPreview } from '@opentiny/tiny-engine'
+import 'virtual:svg-icons-register'
+import { HttpService } from './composable'
+
+const beforeAppCreate = () => {
+  initHook(HOOK_NAME.useEnv, import.meta.env)
+}
+
+initPreview({
+  registry: {
+    root: {
+      id: 'engine.root',
+      metas: [HttpService, GenerateCodeService]
+    },
+    config: { id: 'engine.config', theme: 'light' },
+    toolbars: [Breadcrumb, Media, Lang]
+  },
+  lifeCycles: {
+    beforeAppCreate
+  }
+})

designer-demo/vite.config.js

@@ -0,0 +1,23 @@
+import path from 'node:path'
+import { defineConfig, mergeConfig } from 'vite'
+import { useTinyEngineBaseConfig } from '@opentiny/tiny-engine-vite-config'
+
+export default defineConfig((configEnv) => {
+  const baseConfig = useTinyEngineBaseConfig({
+    viteConfigEnv: configEnv,
+    root: __dirname,
+    iconDirs: [path.resolve(__dirname, './node_modules/@opentiny/tiny-engine/assets/')],
+    useSourceAlias: true,
+    envDir: './env'
+  })
+
+  const customConfig = {
+    envDir: './env',
+    publicDir: path.resolve(__dirname, './public'),
+    server: {
+      port: 8090
+    }
+  }
+
+  return mergeConfig(baseConfig, customConfig)
+})

docs/README.md

@@ -0,0 +1,108 @@
+# 目录
+
+## 使用指南
+
+- 新手指引
+  - [简介](./getting-started/introduction.md)
+  - [快速上手](./getting-started/quick-start.md)
+- 基础功能
+  - [初识设计器](./basic-features/intro-to-designer.md)
+  - [设计前端应用流程](./basic-features/frontend-application-flow.md)
+  - [设计器界面模块简介](./basic-features/designer-ui-modules.md)
+  - [页面管理](./basic-features/page-management.md)
+  - [使用组件](./basic-features/using-components.md)
+  - [样式设置](./basic-features/style-settings.md)
+  - [使用状态管理和变量绑定](./basic-features/state-management-and-variable-binding.md)
+  - [行内样式绑定状态变量](./basic-features/inline-style-variable-binding.md)
+  - [查看大纲树](./basic-features/outline-tree.md)
+  - [国际化](./basic-features/internationalization.md)
+  - [页面和区块预览](./basic-features/page-and-block-preview.md)
+- 进阶功能
+  - [区块管理](./advanced-features/block-management.md)
+  - [使用JS面板和事件绑定](./advanced-features/js-panel-and-event-binding.md)
+  - [使用工具类方法 utils](./advanced-features/using-utils-methods.md)
+  - [高级面板设置](./advanced-features/advanced-panel-settings.md)
+  - [如何使用插槽](./advanced-features/how-to-use-slots.md)
+  - [循环渲染](./advanced-features/loop-rendering.md)
+  - [条件渲染](./advanced-features/conditional-rendering.md)
+  - [集成ChatGPT搭建简单页面能力](./advanced-features/integrating-chatgpt-for-simple-pages.md)
+  - [数据源和Collection—远程字段](./advanced-features/data-source-and-collection-remote-fields.md)
+  - [数据源和Collection—mock数据](./advanced-features/data-source-and-collection-mock-data.md)
+  - [数据源和Collection—使用数据源](./advanced-features/data-source-and-collection-usage.md)
+- 教程
+  - [从零搭建一个页面](./tutorials/build-a-page-from-scratch.md)
+  - [第一期2023.10.27](./tutorials/issue-1-2023.10.27.md)
+
+## 平台开发指南
+
+- 开始
+  - [简介](./development-getting-started/dev-intro.md)
+  - [快速上手](./development-getting-started/dev-quick-start.md)
+  - [前后端启动联调(Java服务端)](./development-getting-started/debugging-of-java-backend.md)
+- 解决方案
+  - [Java服务端部署](./solutions/server-deployment-solution-java.md)
+  - [Node.js服务端部署](./solutions/server-deployment-solution.md)
+  - [区块发布方案(Node.js服务端)](./solutions/block-release-solution.md)
+  - [区块局域网发布方案(Node.js服务端)](./solutions/block-lan-release-solution.md)
+  - [设计器中引入第三方组件库](./solutions/third-party-library-in-designer.md)
+  - [物料同步方案](./solutions/material-sync-solution.md)
+- 扩展能力介绍
+  - [新架构介绍](./extension-capabilities-overview/new-architecture.md)
+  - [注册表](./extension-capabilities-overview/registry.md)
+  - [元服务和元应用](./extension-capabilities-overview/meta-services-and-meta-apps.md)
+- 扩展能力使用教程
+  - [如何开发插件](./extension-capabilities-tutorial/how-to-develop-plugins.md)
+  - 出码功能
+    - [出码功能简介与使用](./extension-capabilities-tutorial/code-output-function/code-output-overview-and-usage.md)
+    - [如何自定义出码](./extension-capabilities-tutorial/code-output-function/how-to-customize-code-output.md)
+    - [如何自定义出码插件](./extension-capabilities-tutorial/code-output-function/how-to-customize-code-output-plugins.md)
+    - [自定义页面出码插件](./extension-capabilities-tutorial/code-output-function/custom-page-code-output-plugin.md)
+    - [官方出码能力API](./extension-capabilities-tutorial/code-output-function/official-code-output-api.md)
+  - [定制插件UI](./extension-capabilities-tutorial/customize-plugin-ui.md)
+  - [定制元服务逻辑](./extension-capabilities-tutorial/customize-meta-service-logic.md)
+  - [开发设置器组件](./extension-capabilities-tutorial/develop-configurator-components.md)
+  - [AI插件使用前配置](./extension-capabilities-tutorial/ai-plugin-configuration.md)
+- API
+  - [API总览](./api/api-overview.md)
+  - 前端API
+    - [主包API](./api/frontend-api/main-package-api.md)
+    - [画布API](./api/frontend-api/canvas-api.md)
+    - [全局布局API](./api/frontend-api/global-layout-api.md)
+    - [物料API](./api/frontend-api/material-api.md)
+    - [设置面板API](./api/frontend-api/settings-panel-api.md)
+  - 后端API
+    - [AI功能接口](./api/backend-api/ai-function-api.md)
+    - [应用管理](./api/backend-api/app-management.md)
+    - [区块分类](./api/backend-api/block-categories.md)
+    - [应用工具类管理](./api/backend-api/app-utility-management.md)
+    - [区块管理](./api/backend-api/block-management-api.md)
+    - [数据源管理](./api/backend-api/data-source-management.md)
+    - [DSL代码生成](./api/backend-api/dsl-code-generation.md)
+    - [物料中心](./api/backend-api/material-center.md)
+    - [页面管理](./api/backend-api/page-management-api.md)
+    - [APP服务](./api/backend-api/app-services.md)
+- 实战案例
+  - [PDM元数据审批电子流](./practical-cases/pdm-metadata-approval-workflow.md)
+  - [图元编排设计器](./practical-cases/graphical-element-arrangement-designer.md)
+  - [SMB轻量应用服务](./practical-cases/smb-lightweight-application-service.md)
+
+## 网站文档
+
+- 生态中心
+  - [介绍](./ecosystem-center/ecosystem-intro.md)
+  - [如何导入组件库](./ecosystem-center/how-to-import-library.md)
+  - [如何发布区块](./ecosystem-center/how-to-publish-block.md)
+  - [发布其他生态](./ecosystem-center/publish-other-ecosystems.md)
+- 关于应用
+  - [创建应用（创建空白应用、从模板创建应用）](./about-applications/create-application-blank-or-template.md)
+  - [开发应用](./about-applications/develop-application.md)
+- 关于物料
+  - [介绍](./about-materials/materials-intro.md)
+  - [创建物料资产包](./about-materials/create-material-asset-package.md)
+  - [添加组件库和区块](./about-materials/add-library-and-blocks.md)
+  - [构建物料资产包](./about-materials/build-material-asset-package.md)
+- 关于设计器
+  - [介绍](./about-designer/designer-intro.md)
+  - [创建设计器](./about-designer/create-designer.md)
+  - [定制物料资产包、主题、DSL、工具栏和插件栏](./about-designer/customize-material-package-themes-dsl-toolbar-plugins.md)
+  - [定制设计器](./about-designer/customize-designer.md)

docs/about-applications/create-application-blank-or-template.md

@@ -0,0 +1,13 @@
+# 关于应用
+
+## 如何创建应用
+设计器定制完成后，用户可以在 [我的设计器](https://www.opentiny.design/tiny-engine#/my-platform) 中创建应用。选择对应的设计器，在设计器右下方点击“创建应用”。
+创建应用有两种方式：
+
+1.创建空白应用 → 填写必要的字段 → 保存。
+
+![创建应用方式一]( ./imgs/appCreateOne.png)
+
+2.从模板创建应用→ 选择应用模板 → 填写必要的字段 → 保存。
+
+![创建应用方式二]( ./imgs/appCreateTwo.png)

docs/about-applications/develop-application.md

@@ -0,0 +1,11 @@
+# 关于应用
+
+## 如何去开发应用
+
+应用创建完成后，即可在 **我的应用** 中看到这个应用，点击 **开发应用** 即可前往可视化设计器进行可视化地搭建该应用下的 *页面* 和 *区块*。
+
+![view-app1]( ./imgs/appDevOne.png)
+
+### 可视化设计器
+
+![view-app2]( ./imgs/appDevTwo.png)

docs/about-designer/create-designer.md

@@ -0,0 +1,6 @@
+# 关于设计器
+
+## 如何创建一个设计器
+
+用户可以在 [我的设计器](https://www.opentiny.design/tiny-engine#/my-platform) 中创建设计器，创建设计器 → 填写必要的字段 → 确定
+![create-platform]( ./imgs/createPlatform.png)

docs/about-designer/customize-designer.md

@@ -0,0 +1,13 @@
+# 关于设计器
+
+## 如何定制一个设计器
+
+物料资产包、主题、工具、插件和DSL定制完成后，有两种方式可以构建设计器。
+
+方式一：可视化构建
+
+![build-platform1]( ./imgs/buildPlatform1.png)
+
+方式二：由源码构建
+
+![build-platform2]( ./imgs/buildPlatform2.png)

docs/about-designer/customize-material-package-themes-dsl-toolbar-plugins.md

@@ -0,0 +1,20 @@
+# 关于设计器
+
+## 如何定制物料资产包、主题、DSL、工具栏和插件栏
+
+设计器创建完成后会自动打开编辑页面，用户可以在这里定制设计器的*物料资产包*、*主题*、*工具*、*插件*和*DSL*，如下图：
+
+1. **定制物料资产包：** 物料资产包  **必选且唯一**  , **不允许删除** 物料资产包，可以添加其他物料资产包来替换当前的。
+![define-material]( ./imgs/defineMaterial.png)
+
+2. **定制主题：** 主题 **必选且唯一** ，**不允许删除** 主题，可以添加其他主题来替换当前的
+![define-theme]( ./imgs/defineTheme.png)
+
+3. **定制DSL：** DSL为 **单选**。DSL是将物料的Schema 解析成不同技术栈源码的转换工具，所以DSL的必须和选择的物料在技术栈保持一致。
+![define-DSL]( ./imgs/defineDsl.png)
+
+4. **定制工具：** 可以将工具拖入上方位置栏，规划定制的设计器里工具的位置。工具可以多选，也可以删除。
+![define-tools]( ./imgs/defineTools.png)
+
+5. **定制插件：** 可以将插件拖入中间位置栏，规划定制的设计器里插件的位置。插件可以多选，也可以删除。
+![define-plugs]( ./imgs/definePlugs.png)

docs/about-designer/designer-intro.md

@@ -0,0 +1,6 @@
+# 构建自定义设计器
+
+## 什么是定制扩展能力
+
+什么是扩展能力呢，一方面我们可以快速拥有一个官方标准的设计器，另外一方面如果用户有独特的业务功能需要，我们可以不用看它的源码、不用关心其实现，用户可以使用 API、插件等方式快速开发自己的工具，插件，DSL等的npm包，用于构建用户自定义的设计器。而设计器引擎对于设计器的扩展能力支持基本上覆盖了设计器的所有功能点。
+![expend]( ./imgs/platformExpend.png)

docs/about-materials/add-library-and-blocks.md

@@ -0,0 +1,19 @@
+# 添加组件库/区块
+
+## 如何添加组件库与区块
+
+可视化设计器已为您提供官方组件库与一些区块，物料资产包创建完成后会自动打开编辑页面，用户可以在这里添加组件库与区块，如下图：
+
+* **添加组件库:** 选中未选择的组件库
+![添加组件库](./imgs/createMaterialLib.png)
+
+* **添加区块：** 选中未选择的区块
+![添加区块](./imgs/createMaterialBlock.png)
+
+* **移除组件库：** 取消选中已经选择的组件库，并且确认
+![移除组件库](./imgs/createMaterialLibCancel.png)
+  
+* **移除区块：** 取消选中已经选择的区块，并且确认
+![移除区块](./imgs/createMaterialBlockCancel.png)
+
+* 用户也可以在生态中心录入自己的组件库与区块。

docs/about-materials/build-material-asset-package.md

@@ -0,0 +1,6 @@
+# 构建物料资产包
+
+## 如何构建物料资产包
+
+添加完组件库与区块后，点击底部 **构建物料资产包** 按钮，即可完成物料资产包的构建。构建完成后即可看到发布地址。
+![构建物料资产包](./imgs/createMaterial.gif)

docs/about-materials/create-material-asset-package.md

@@ -0,0 +1,10 @@
+# 创建物料资产包
+
+## 如何创建物料资产包
+
+用户可以在生态中心创建物料资产包，*新建物料资产包* → *填写必要的字段* → *保存。*
+当前支持Vue和Angular两种技术栈，用户可以任意选择。当用户选择了Vue技术栈时，则只能添加Vue的组件与区块，不能添加Angular的组件库与区块。
+
+物料资产包版本是用户自定义的，用户可以将物料资产包回退到任一版本。
+
+![构建物料资产包](./imgs/createMaterial.gif)

docs/about-materials/materials-intro.md

@@ -0,0 +1,16 @@
+# 关于物料资产包
+
+## 什么是物料
+
+物料是可视化页面搭建的原料，按照粒度可分为组件库和区块
+
+1. **组件库**：组件库一般是按照组件的性质进行组织。组件是页面搭建最小的可复用单元，其只对外暴露配置项，用户无需感知其内部实现。组件库在设计器定制完成后 **不能再次添加与删除** 。
+2. **区块**：区块可以包含一个或多个组件也可以包含其他区块，带有一定的业务逻辑，能够实现更丰富的功能与表现。区块分为**消费侧**和**管理侧**，在区块管理侧，用户可以向设计器中拖入一个区块后可以编辑其内部的组件和区块配置，暴露区块的属性和事件供消费区块的时候使用，最后发布区块，消费侧区块就会更新为最新的区块内容。区块在设计器定制完成后仍能添加与删除。
+
+设计器中的物料需要进行一定的配置和处理，才能让用户在设计器使用起来。这个过程中，需要一份配置文件，也就是物料资产包。物料资产包文件中，针对每个物料定义了它们在设计器中的使用描述。
+
+## 什么是物料资产包
+
+在设计器中，我们可以看到，组件与区块面板不只提供一个组件或区块，它们是以集合的形式提供给设计器的，而物料资产包正是这些组件与区块构成的集合。
+
+![view-material](./imgs/materialPanel.png)

docs/advanced-features/advanced-panel-settings.md

@@ -0,0 +1,69 @@
+# 高级面板设置
+
+> 选中组件之后，我们可以在高级面板对组件进行事件的绑定、以及循环渲染、条件渲染等高级设置
+
+## 条件渲染
+
+在页面开发中，我们可能需要根据某些条件来动态显示或隐藏页面中的内容，举个例子：我们希望当用户已经登录的时候，显示欢迎登录的文字，未登录的时候，显示请登录的文字。
+那么，我们可以在组件上面绑定条件渲染，点击绑定变量，选择变量 state.isLogin，那么，我们的组件就会根据变量 state.isLogin 的真假值来进行渲染。
+
+![条件渲染示例](./imgs/conditionRender.gif)
+
+## 循环渲染
+
+我们的页面可能有若干份重复的、动态生成的内容，比如商品列表页，比如表格数据。这时候，我们就需要用到循环渲染
+
+我们可以在高级面板中指定循环数据绑定的变量、迭代的变量名、索引变量名、以及唯一的 key。
+举例：假如我们的状态变量中有一个镜像列表，我们希望渲染出来镜像的 icon、镜像名称以及镜像版本，那么我们可以使用循环渲染来实现：
+
+![循环渲染](./imgs/useLoop.gif)
+
+相关概念关联：
+
+- 循环数据，即需要循环渲染的数组，在这里是 state.imageList
+- 迭代变量名，在循环渲染子项对应的变量名，默认为 item
+- 索引变量名，循环渲染的索引变量名，默认为 index
+- key，标识唯一的 key，默认为 index
+
+最终出码：
+
+```vue
+<template>
+  <div v-for="(item, index) in state.imageList" :key="index">
+    <span>{{ item.title }}</span>
+  <!---列表细节--->
+  </div>
+</template>
+```
+
+## 事件绑定
+
+我们可以给选中的组件进行事件的绑定：
+
+- 在绑定事件下拉按钮中选中需要绑定的事件
+- 随后在事件绑定弹窗中指定方法名称
+- 指定拓展参数
+- 点击确定，在随后弹出的JS面板中进行绑定方法的具体逻辑实现
+
+![事件绑定演示](./imgs/bindEvent.gif)
+
+### 拓展参数相关说明
+
+在某些点击事件中，我们不仅仅希望得知事件是否被点击，我们还希望在点击事件中获得一些额外的参数，这时候，我们就可以用拓展参数，下面举例说明：
+我们希望为镜像列表中的列表项绑定点击事件，然后将镜像的 id 和版本传入到事件处理函数中。那么，我们就可以使用拓展参数进行传入。
+
+```bash
+# 循环渲染项迭代变量名 item
+# 拓展参数设置：
+["item.imageId", "item.imageVersion"]
+```
+
+最终出码：
+
+```vue
+<template>
+  <div v-for="(item, index) in state.imageList" @click="(e) => handleClick(e, item.imageId, item.imageVersion)">
+  <!---列表细节--->
+  </div>
+</template>
+```

docs/advanced-features/block-management.md

@@ -0,0 +1,129 @@
+# 区块管理
+
+> 区块的概念类似于前端开发中的 Component，我们可以将很多页面中都一样的结构（比如 Header），构建到区块中，发布之后直接在页面中拖入使用，提高开发效率
+
+## 区块相关概念
+
+假设我们有如下前端工程：
+
+```bash
+- project
+  - components
+    |_ Header.vue
+     - Footer.vue
+     - Container.vue
+  - views
+    |_ Index.vue
+     - Page2.vue
+    - TodoFolder
+      |_ Todo.vue
+```
+
+其中，views 文件夹下 views每个页面都有路由一一对应，用户可以根据路由访问。components文件夹下的 Header、Footer、Container则没有对应路由可以访问，但是他们可以被页面1、2、3引用，提高代码复用率，我们的区块则对应 components 下的Header、Footer、Container等组件概念（即可重用的业务组件）。
+
+### 区块发布相关概念
+
+我们对区块编辑好之后，最终还是提供给另一个区块或者页面使用（即被另一个区块或者页面引用），所以我们设计了发布的概念，区块发布之后，会生成一个版本，可以在物料面板添加已经发布的区块，选择版本，然后拖入画布中消费使用
+
+## 区块的基本使用与管理
+
+创建区块可以有创建空白区块和从现有页面中创建区块两种
+
+### 创建空白区块
+
+![创建空白区块](./imgs/createEmptyBlock.png)
+
+如上图，按照步骤可创建空白区块
+
+- 点击左侧区块插件打开区块插件面板
+- 点击右上角新增按钮
+- 在弹窗中输入区块ID与区块名称
+
+相关概念
+
+- 区块ID：区块的唯一ID，对应出码后的区块文件名
+- 区块名称：在区块管理面板和物料消费面板显示的名称
+
+### 从现有页面中选中组件创建区块
+
+![从现有页面中选中组件创建区块](./imgs/createBlockFromPage.gif)
+
+如上图，我们可以从现有页面中，按照步骤创建新区块
+
+- 点击画布选中组件
+- 右键，在弹出的右键菜单中点击新建区块
+- 在弹出的弹窗中输入新区块的ID和名称，点击确认
+- 最终我们得到了有选中组件作为初始内容的区块
+
+## 区块管理与设置
+
+在上述创建空白区块的区块管理插件中，我们还能看到现有的区块，对现有的区块进行修改和删除等管理操作，下面，我们来学习区块的几个管理属性
+
+### 区块基本设置
+
+![区块基本设置](./imgs/blockBaseSetting.png)
+
+如上图，点击区块列表中区块的右上角的设置按钮，即可打开设置面板。区块的基本设置中，我们可以对区块的名称、描述、标签、公开范围进行设置，下面对相关设置项进行讲解
+
+- 区块描述：区块的描述，可以让别人更好的明白该区块的用途以及含义
+- 区块标签：区块的标签，方便消费侧用户搜索
+- 公开范围：区块的公开范围，设置 区块发布之后别的用户是否可以搜索，私有即只有自己可以看到、公开即所有用户都可以看到、半公开可以选择可以搜索到该区块的组织
+
+### 区块暴露属性设置
+
+#### 区块暴露属性的相关概念
+
+假设我们的前端工程中有一个 Header 组件，该组件定义了 title 和 description 两个 props 属性
+
+```vue
+<template>
+  <header>
+    <h1>{{props.title}}</h1>
+    <span>{{props.description}}</span>
+  </header>
+</template>
+
+<script setup>
+
+const props = defineProps({
+  title: { type: String, default: '' },
+  description: { type: String, default: '' }
+})
+</script>
+```
+
+区块暴露属性的概念即对应 组件中的 props 属性。暴露属性声明了外部组件引用当前组件时，可以定义的相关属性
+
+#### 区块暴露属性的相关设置
+
+区块暴露属性的设置与我们代码 props 的设置相似，只是区块暴露属性多了一个指定属性面板组件和属性的相关配置
+
+![区块暴露属性设置](./imgs/blockExposeAttr.gif)
+
+#### 区块暴露属性的消费
+
+在区块发布之后，我们在物料面板拖出区块到画布中，选中我们拖出的区块，右侧属性面板的属性即是我们定义的暴露属性
+
+![区块暴露属性的消费](./imgs/blockexposeattrusage.gif)
+
+### 区块事件设置
+
+#### 区块事件的概念
+
+既然区块暴露属性等同于 组件 中的 props 属性，类似的，区块的事件即等同于 vue 中的 emit 事件声明
+
+```vue
+<script setup>
+  const emit = defineEmits(['update:modelValue', 'success'])
+</script>
+```
+
+注意的是，这里仅仅是声明我们的区块会抛出什么事件，真正的事件需要引用方（即消费该区块的一方在高级面板进行定义）
+
+### 生命周期设置
+
+同页面生命周期，即可以设置对应技术栈的生命周期函数
+
+### 版本列表
+
+可以预览对应版本的区块

docs/advanced-features/conditional-rendering.md

@@ -0,0 +1,30 @@
+# 条件渲染
+
+在页面开发中，可能需要根据某些条件来动态显示或隐藏页面中的内容，例如：如果您希望当用户已经登录的时候，显示“欢迎登录“的文字，未登录的时候，显示“请登录“的文字。
+
+1. 拖拽组件至画布，分别输入希望展示的文字。
+2. 添加变量，例如state.isLogin
+
+   **图 1**  添加变量
+
+   ![addvar-15](./imgs/addvar-15.png)
+
+3. 选中组件，在组件属性设置面板选择“高级”。
+4. 单击“是否渲染“后的 ![变量绑定图标](./imgs/icon-code.png)，进行变量绑定。
+
+   **图 2**  绑定变量
+
+   ![bindVariable-16.png](./imgs/bindVariable-16.png)
+
+5. 选项绑定的变量，单击“确定”。
+
+   绑定成功后可根据变量state.isLogin的值，查看渲染效果。
+
+   **图 3**  state.isLogin为false时
+
+   ![state-isLogin为false时](./imgs/state-isLogin为false时.png)
+
+   **图 4**  state.isLogin为ture时
+
+   ![state-isLogin为ture时.png](./imgs/state-isLogin为ture时.png)
+

docs/advanced-features/data-source-and-collection-mock-data.md

@@ -0,0 +1,21 @@
+# 数据源Mock数据
+
+目前数据源在编辑态时只能使用Mock数据，所以我们可能需要给数据源添加Mock数据
+
+## 操作步骤
+
+- 打开数据源面板，选中数据源
+- 点击新增数据，添加数据并保存
+![新增数据](./imgs/dataSource5.png)
+
+## 使用数据源Mock数据
+
+- 拖动一个Collection组件到画布中，在Collection组件属性面板上选择数据源
+- 拖动格组件到Collection中，表格组件将自动生成数据源中的字段
+![使用数据源Mock数据](not-found/dataSource6.png)
+
+## 更新数据源到画布
+
+添加完Mock数据后，画布上绑定的数据源不会同步改变，需要手动更新，操作如下：
+选中画布中的数据源，打开属性面板，点击更新数据源
+![更新数据源到画布](./imgs/dataSource7.png)

docs/advanced-features/data-source-and-collection-remote-fields.md

@@ -0,0 +1,27 @@
+# 数据源获取远程字段
+
+我们可以通过已有的远程Http接口，快速地生成数据源的字段
+
+## 操作步骤
+
+- 打开数据源面板，新建数据源。点击获取远程数据
+- 设置请求地址、请求方式、请求参数、请求结果回调
+![数据源设置](./imgs/dataSource1.png)
+- 请求成功后获取到接口字段信息，填写字段名后，保存后即可生成数据源字段信息
+![请求结果](./imgs/dataSource2.png)
+![字段配置](./imgs/dataSource3.png)
+![保存数据源](./imgs/dataSource4.png)
+
+
+## 请求完成回调函数示例
+- 解析对象数组
+```javascript
+function dataHandler(data) { 
+     return data.map(v => {
+      return {
+        name: v.aa.ss,
+    status: v.status
+  }
+ })
+}
+```

docs/advanced-features/data-source-and-collection-usage.md

@@ -0,0 +1,127 @@
+## 数据源
+
+### 前言
+设计器提供数据源来配合画布上的组件/区块渲染，数据源的配置既可以采取在设计器中静态配置的方式，也可以采取远程 API 请求 JSON 数据动态获取的方式。
+
+> 目前**数据源**可便捷地应用于表格组件的表格列，也可灵活地应用于手动调用指定的远程 API。
+
+### 创建数据源
+
+创建数据源步骤：
+
+1. 选择左边操作栏 - 数据源
+2. 点击左上操作区 - 新建数据源
+
+    ![Alt text](./imgs/data-source-2.png)
+3. 配置数据源类型（可选对象数组、树结构），配置数据源名称以及数据源字段
+4. 保存数据源
+
+    ![Alt text](./imgs/data-source-1.png)
+
+
+### 表格组件中的应用
+
+数据源主要载体为**Collection组件**，因此在使用数据源之前需要先在画布中拖放入**Collection组件**，然后在属性面板中选择需要绑定的数据源
+
+![Alt text](./imgs/data-source-3.png)
+
+然后需要在Collection组件中放入Grid表格组件，根据提示引入配置数据，就会自动解析出表格列数据
+
+![Alt text](./imgs/data-source-4.png)
+
+### 手动调用指定的远程 API
+
+低代码引擎，将所有数据源都挂载到了 `dataSourceMap` 中，并为每个数据源都提供了 `load` 方法，用于手动调用场景，比如：点击保存按钮时，需要调用后端的保存接口，提交用户填写的数据，此时可以通过数据源来提交。
+
+#### 使用说明
+
+`this.dataSourceMap.xxx.load()`
+
+- xxx 为在数据源面板设置的数据源名称
+- 支持传入请求参数，可用于覆盖在数据源面板中配置的请求参数（默认请求参数）
+- load 方法返回一个 Promise
+
+#### 示例
+
+以会议预订页面为例，为 `创建` 按钮绑定点击事件（`onClick`）
+
+![Alt text](./imgs/data-source-load-1.png)
+
+绑定点击事件处理器为 `createMeeting`，补充其实现，主要为 `this.dataSourceMap.createMeeting.load(this.state.meeting)`。
+表示将用户填写的会议信息（`this.state.meeting`），调用数据源 `addMeeting`（POST 请求），提交给后端。
+![Alt text](./imgs/data-source-load-2.png)
+
+其中，数据源 `addMeeting` 配置示例如下：
+![Alt text](./imgs/data-source-load-3.png)
+
+完整代码示例如下：
+```js
+async function createMeeting() {
+  try {
+    const res = await this.dataSourceMap.addMeeting.load(this.state.meeting)
+    console.log('成功创建以下会议：', res)
+  } catch {
+    this.utils.toast({
+      type: 'error',
+      title: '创建会议请求失败，请稍候重试或联系客服' 
+    })
+  }
+}
+```
+
+# 数据源获取远程字段
+
+在使用数据源之前，我们需要向数据源中添加属性字段，可以通过“新建字段”按钮逐个添加。
+
+但某些场景下，有更高效的添加方式，比如：基于已有的 HTTP 接口响应数据，快速地创建数据源的字段。
+
+## 操作步骤
+
+- 打开数据源面板，新建数据源。点击获取远程数据
+- 设置请求地址、请求方式、请求参数、请求结果回调
+![数据源设置](./imgs/dataSource1.png)
+- 请求成功后获取到接口字段信息，填写字段名后，保存后即可生成数据源字段信息
+![请求结果](./imgs/dataSource2.png)
+![字段配置](./imgs/dataSource3.png)
+![保存数据源](./imgs/dataSource4.png)
+
+> 如果接口请求存在跨域、鉴权等情况，无法通过“发送请求”自动填充响应数据时，可以手动将响应数据（比如：JSON 格式数据），粘贴至下方的“请求结果”编辑器中。
+
+## 请求完成回调函数示例
+
+- 解析对象数组
+
+```javascript
+function dataHandler(data) {
+  return data.map(v => ({
+      name: v.nickName,
+      status: v.status
+    })
+  )
+}
+```
+
+
+
+
+# 数据源Mock数据
+
+目前数据源在编辑态时只能使用Mock数据，所以我们可能需要给数据源添加Mock数据
+
+## 操作步骤
+
+- 打开数据源面板，选中数据源
+- 点击新增数据，添加数据并保存
+![新增数据](./imgs/dataSource5.png)
+
+## 使用数据源Mock数据
+
+- 拖动一个Collection组件到画布中，在Collection组件属性面板上选择数据源
+- 拖动格组件到Collection中，表格组件将自动生成数据源中的字段
+![使用数据源Mock数据](not-found/dataSource6.png)
+
+## 更新数据源到画布
+
+添加完Mock数据后，画布上绑定的数据源不会同步改变，需要手动更新，操作如下：
+选中画布中的数据源，打开属性面板，点击更新数据源
+![更新数据源到画布](./imgs/dataSource7.png)

docs/advanced-features/how-to-use-slots.md

@@ -0,0 +1,165 @@
+# 插槽的声明与使用
+
+## 插槽的相关概念
+
+> 插槽的概念与 vue.js 的插槽 [slot](https://cn.vuejs.org/guide/components/slots.html) 概念一致
+
+我们以上述 Header组件为例，讲解插槽需要了解的核心概念：
+
+- 插槽名字：插槽名字默认为 default
+- 作用域插槽：用于向插槽传入子组件状态
+
+```vue
+// Header.vue
+<template>
+  <header>
+    <h1>TinyEngine</h1>
+    <slot name="menu" :menu="state.menu" :type="'mobile'">
+      <menu>
+        <li v-for="item in state.menu" :key="item.id">{{ item.name }}</li>
+      </menu>
+    </slot>
+  </header>
+</template>
+```
+
+```vue
+<template>
+ <Header>
+  <template #menu="{ menu, type }">
+    <ul>
+      <li v-for="item in menu" :key="item.id">{{ item.name }}</li>
+    </ul>
+  </template>
+ </Header>
+</template>
+```
+
+如以上代码为例子，当我们使用 `Header` 组件的时候，我们可以声明 menu 插槽，并且在 menu 插槽里面获取到子组件 menu 的状态。此时即为作用域插槽。
+
+## 插槽的声明
+
+在区块中，我们可以通过拖入插槽的方式声明插槽。然后，我们可以在右侧设置面板设置插槽的名字，向插槽传入 props。
+如果需要传入 props，我们可以通过编辑代码写入我们需要的表达式，将 props 传入 插槽中。
+
+![插槽声明](./imgs/defineslot.gif)
+
+我们得到的带有插槽的 schema 大致为以下样式：
+
+```json5
+{
+  "componentName": "Slot",
+  "props": {
+    "name": "menu",
+    "params": [
+      {
+        "name": "title",
+        "value": {
+          "type": "JSExpression",
+          "value": "this.state.ggggg"
+        }
+      }
+    ]
+  },
+  "id": "25632b32",
+  "children": [
+    {
+      "componentName": "Text",
+      "props": {
+        "text": "TinyEngine 前端可视化设计器，为设计器开发者提供定制服务，在线构建出自己专属的设计器。"
+      },
+      "id": "63246b33"
+    }
+  ]
+}
+```
+
+区块出码大致为：
+
+```vue
+<template>
+<div>
+  <slot name="menu" :title="state.ggggg">
+    <span>TinyEngine 前端可视化设计器，为设计器开发者提供定制服务，在线构建出自己专属的设计器。</span>
+  </slot>
+</div>
+</template>
+```
+
+最后，我们可以经过保存 -> 发布 -> 组件面板导入区块的流程，将区块变成可消费的组件。
+
+## 插槽的使用
+
+上一步，我们通过低代码的区块，或者导入的已有的组件声明插槽，那么我们将可以将组件或者区块拖入画布中，在右侧面板相关的配置项开启插槽。
+
+然后画布会开启对应的插槽，我们可以往插槽中拖入编排插槽组件。
+
+在拖入的组件中，我们可以通过绑定变量的方式获取传入的作用域插槽：
+
+![拖入使用区块插槽](./imgs/usingslot.gif)
+
+最终得到的 schema 大致为：
+
+```json5
+{
+  // 组件或者区块名
+  "componentName": "BlockFileName",
+  "props": {},
+  "componentType": "Block",
+  "id": "363d84ba",
+  "children": [
+    {
+      // 子组件是 template
+      "componentName": "Template",
+      "props": {
+        // slot 作为 props，说明是插槽
+        "slot": {
+          // 插槽名称
+          "name": "menu",
+          // 插槽参数
+          "params": [
+            "title"
+          ]
+        }
+      },
+      // 插槽内容
+      "children": [
+        {
+          "componentName": "Text",
+          "props": {
+            // 这里 text 使用作用域插槽传入的变量，我们绑定变量 title 即可生效
+            "text": {
+              "type": "JSExpression",
+              "value": "title"
+            }
+          },
+          "id": "24212a32"
+        }
+      ],
+      "id": "42753254"
+    }
+  ]
+}
+```
+
+组件的插槽，也类似于区块插槽，我们在组件物料定义插槽即可：
+
+```json5
+{
+  // 物料 schema 定义
+  "schema": {
+    // 定义插槽
+    "slots": {
+      // 命名插槽，为 menu
+      "menu": {
+        // 在右侧属性面板显示的名称
+        "label": {
+          "zh_CN": "menu"
+        },
+        // 插槽参数名
+        "params": ["title"]
+      }
+    }
+  }
+}
+```