Merge remote-tracking branch 'upstream/refactor/develop' into refactor/theme-rest

Author: wenmine

designer-demo/public/mock/bundle.json

@@ -14,6 +14,7 @@ import {
   Breadcrumb,
   Fullscreen,
   Lang,
+  ViewSetting,
   Logo,
   Lock,
   Media,
@@ -70,7 +71,8 @@ export default {
         collapse: [
           ['engine.toolbars.collaboration'],
           ['engine.toolbars.refresh', 'engine.toolbars.fullscreen'],
-          ['engine.toolbars.lang']
+          ['engine.toolbars.lang'],
+          ['engine.toolbars.viewSetting']
         ]
       }
     }
@@ -96,9 +98,23 @@ export default {
     GenerateCode,
     Save,
     Fullscreen,
-    Lang
+    Lang,
+    ViewSetting
+  ],
+  plugins: [
+    Materials,
+    Tree,
+    Page,
+    [Block, { options: { ...Block.options, mergeCategoriesAndGroups: true } }],
+    Datasource,
+    Bridge,
+    I18n,
+    Script,
+    State,
+    Schema,
+    Help,
+    Robot
   ],
-  plugins: [Materials, Tree, Page, Block, Datasource, Bridge, I18n, Script, State, Schema, Help, Robot],
   dsls: [{ id: 'engine.dsls.dslvue' }],
   settings: [Props, Styles, Events],
   canvas: Canvas

designer-demo/registry.js

@@ -23,6 +23,7 @@
       "@opentiny/tiny-engine-toolbar-breadcrumb": ["packages/toolbars/breadcrumb/index"],
       "@opentiny/tiny-engine-toolbar-fullscreen": ["packages/toolbars/fullscreen/index"],
       "@opentiny/tiny-engine-toolbar-lang": ["packages/toolbars/lang/index"],
+      "@opentiny/tiny-engine-toolbar-view-setting": ["packages/toolbars/view-setting/index"],
       "@opentiny/tiny-engine-toolbar-layout": ["packages/toolbars/layout/index"],
       "@opentiny/tiny-engine-toolbar-lock": ["packages/toolbars/lock/index"],
       "@opentiny/tiny-engine-toolbar-logo": ["packages/toolbars/logo/index"],
@@ -51,6 +52,7 @@
       "@opentiny/tiny-engine-toolbar-breadcrumb/*": ["packages/toolbars/breadcrumb/*"],
       "@opentiny/tiny-engine-toolbar-fullscreen/*": ["packages/toolbars/fullscreen/*"],
       "@opentiny/tiny-engine-toolbar-lang/*": ["packages/toolbars/lang/*"],
+      "@opentiny/tiny-engine-toolbar-view-setting/*": ["packages/toolbars/view-setting/*"],
       "@opentiny/tiny-engine-toolbar-layout/*": ["packages/toolbars/layout/*"],
       "@opentiny/tiny-engine-toolbar-lock/*": ["packages/toolbars/lock/*"],
       "@opentiny/tiny-engine-toolbar-logo/*": ["packages/toolbars/logo/*"],

jsconfig.json

@@ -2092,7 +2092,8 @@
           "value": "",
           "package": "axios",
           "destructuring": false,
-          "exportName": "axios"
+          "exportName": "axios",
+          "cdnLink": "https://unpkg.com/browse/[email protected]/dist/esm/axios.min.js"
         }
       },
       {

mockServer/src/mock/get/app-center/v1/apps/schema/918.json

@@ -24,6 +24,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.21.3",
     "@types/node": "^18.0.0",
+    "@vue/eslint-config-typescript": "^11.0.3",
     "chokidar": "^3.5.3",
     "concurrently": "^8.2.0",
     "cross-env": "^7.0.3",

package.json

@@ -31,10 +31,7 @@
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@types/babel__core": "^7.20.5",
-    "@typescript-eslint/eslint-plugin": "^8.14.0",
-    "@typescript-eslint/parser": "^8.14.0",
     "@vitejs/plugin-vue": "^5.1.2",
-    "eslint": "^8.38.0",
     "typescript": "~5.4.2",
     "vite": "^5.4.2",
     "vite-plugin-dts": "^4.3.0"

packages/block-compiler/package.json

@@ -29,7 +29,7 @@ const getDefaultConfig = (engineConfig) => {
     base: './',
     publicDir: path.resolve(root, './public'),
     resolve: {
-      extensions: ['.js', '.jsx', '.vue'],
+      extensions: ['.js', '.jsx', '.vue', '.ts', '.tsx'],
       alias: {}
     },
     server: {

packages/build/vite-config/src/default-config.js

@@ -36,6 +36,7 @@ const getDevAlias = (useSourceAlias) => {
     '@opentiny/tiny-engine-toolbar-breadcrumb': path.resolve(basePath, 'packages/toolbars/breadcrumb/index.js'),
     '@opentiny/tiny-engine-toolbar-fullscreen': path.resolve(basePath, 'packages/toolbars/fullscreen/index.js'),
     '@opentiny/tiny-engine-toolbar-lang': path.resolve(basePath, 'packages/toolbars/lang/index.js'),
+    '@opentiny/tiny-engine-toolbar-view-setting': path.resolve(basePath, 'packages/toolbars/view-setting/index.js'),
     '@opentiny/tiny-engine-toolbar-layout': path.resolve(basePath, 'packages/toolbars/layout/index.js'),
     '@opentiny/tiny-engine-toolbar-lock': path.resolve(basePath, 'packages/toolbars/lock/index.js'),
     '@opentiny/tiny-engine-toolbar-logo': path.resolve(basePath, 'packages/toolbars/logo/index.js'),
@@ -53,7 +54,7 @@ const getDevAlias = (useSourceAlias) => {
     '@opentiny/tiny-engine-theme-light': path.resolve(basePath, 'packages/theme/light/index.less'),
     '@opentiny/tiny-engine-theme-base': path.resolve(basePath, 'packages/theme/base/src/index.js'),
     '@opentiny/tiny-engine-svgs': path.resolve(basePath, 'packages/svgs/index.js'),
-    '@opentiny/tiny-engine-canvas/render': path.resolve(basePath, 'packages/canvas/render/index.js'),
+    '@opentiny/tiny-engine-canvas/render': path.resolve(basePath, 'packages/canvas/render/index.ts'),
     '@opentiny/tiny-engine-canvas': path.resolve(basePath, 'packages/canvas/index.js'),
     '@opentiny/tiny-engine-utils': path.resolve(basePath, 'packages/utils/src/index.js'),
     '@opentiny/tiny-engine-webcomponent-core': path.resolve(basePath, 'packages/webcomponent/src/lib.js'),

packages/build/vite-config/src/vite-plugins/devAliasPlugin.js

@@ -9,24 +9,23 @@
 * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
 *
 */
-
 module.exports = {
   env: {
     browser: true,
     es2015: true,
     node: true,
     jest: true
   },
-  extends: ['eslint:recommended', 'plugin:vue/vue3-essential'],
+  extends: ['eslint:recommended', 'plugin:vue/vue3-essential', '@vue/eslint-config-typescript'],
   parser: 'vue-eslint-parser',
   parserOptions: {
-    parser: '@babel/eslint-parser',
+    parser: '@typescript-eslint/parser',
     ecmaVersion: 'latest',
     sourceType: 'module',
     requireConfigFile: false,
     babelOptions: {
       parserOpts: {
-        plugins: ['jsx']
+        plugins: ['jsx', 'typescript']
       }
     }
   },
@@ -37,6 +36,8 @@ module.exports = {
     'space-before-function-paren': 'off',
     'vue/multi-word-component-names': 'off',
     'no-use-before-define': 'error',
-    'no-unused-vars': ['error', { ignoreRestSiblings: true, varsIgnorePattern: '^_', argsIgnorePattern: '^_' }]
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': ['error', { ignoreRestSiblings: true, varsIgnorePattern: '^_', argsIgnorePattern: '^_' }],
+    'import/no-inner-modules': 'off'
   }
 }

packages/canvas/.eslintrc.cjs

@@ -1,5 +1,8 @@
 <template>
   <component :is="CanvasLayout">
+    <template #header>
+      <component v-if="!isBlock()" :is="CanvasRouteBar"></component>
+    </template>
     <template #container>
       <component
         :is="CanvasContainer.entry"
@@ -9,7 +12,8 @@
         :canvas-src-doc="canvasSrcDoc"
         @remove="removeNode"
         @selected="nodeSelected"
-      ></component>
+      >
+      </component>
     </template>
     <template #footer>
       <component :is="CanvasBreadcrumb" :data="footData"></component>
@@ -18,20 +22,22 @@
 </template>
 
 <script>
-import { ref, watch, onUnmounted } from 'vue'
+import { ref, watch, onUnmounted, onMounted } from 'vue'
 import {
   useProperties,
   useCanvas,
   useLayout,
   useMaterial,
   useHistory,
   useModal,
+  usePage,
+  useMessage,
   getMergeRegistry,
   getMergeMeta,
   getOptions,
   getMetaApi,
   META_SERVICE,
-  useMessage,
+  META_APP,
   useNotify
 } from '@opentiny/tiny-engine-meta-register'
 import { constants } from '@opentiny/tiny-engine-utils'
@@ -51,20 +57,29 @@ export default {
   setup() {
     const registry = getMergeRegistry('canvas')
     const materialsPanel = getMergeMeta('engine.plugins.materials')?.entry
-    const { CanvasBreadcrumb } = registry.components
+    const { CanvasRouteBar, CanvasBreadcrumb } = registry.components
     const CanvasLayout = registry.layout.entry
     const [CanvasContainer] = registry.metas
     const footData = ref([])
     const showMask = ref(true)
     const canvasRef = ref(null)
     let showModal = false // 弹窗标识
     const { canvasSrc = '' } = getOptions(meta.id) || {}
-    let canvasSrcDoc = ''
+    const canvasSrcDoc = ref('')
 
-    if (!canvasSrc) {
-      const { importMap, importStyles } = getImportMapData(getMergeMeta('engine.config')?.importMapVersion)
-      canvasSrcDoc = initCanvas(importMap, importStyles).html
-    }
+    useMessage().subscribe({
+      topic: 'init_canvas_deps',
+      subscriber: 'canvas_design_canvas',
+      callback: (deps) => {
+        if (canvasSrc) {
+          return
+        }
+
+        const { importMap, importStyles } = getImportMapData(getMergeMeta('engine.config')?.importMapVersion, deps)
+
+        canvasSrcDoc.value = initCanvas(importMap, importStyles).html
+      }
+    })
 
     const removeNode = (node) => {
       const { pageState } = useCanvas()
@@ -73,6 +88,8 @@ export default {
       pageState.properties = null
     }
 
+    const isBlock = useCanvas().isBlock
+
     watch(
       [() => useCanvas().isSaved(), () => useLayout().layoutState.pageStatus, () => useCanvas().getPageSchema()],
       ([isSaved, pageStatus, pageSchema], [oldIsSaved, _oldPageStatus, oldPageSchema]) => {
@@ -173,6 +190,63 @@ export default {
       canvasResizeObserver?.disconnect?.()
     })
 
+    const { addToCallbackFns: addHistoryDataChangedCallback } = (function () {
+      const callbackFns = new Set()
+
+      const { subscribe, unsubscribe } = useMessage()
+      let sub
+
+      onMounted(() => {
+        sub = subscribe({
+          topic: 'locationHistoryChanged',
+          subscriber: 'canvas_design_canvas_controller',
+          callback: (value) => callbackFns.forEach((cb) => cb(value))
+        })
+      })
+
+      onUnmounted(() => {
+        if (sub) {
+          unsubscribe(sub)
+        }
+      })
+
+      function addToCallbackFns(cb) {
+        callbackFns.add(cb)
+        return () => callbackFns.delete(cb)
+      }
+      return {
+        addToCallbackFns
+      }
+    })()
+
+    // TODO: 待挪到 getBaseInfo
+    const baseInfoKeys = Object.keys(getMetaApi(META_SERVICE.GlobalService).getBaseInfo())
+    function replaceKey(key) {
+      const existingKey = baseInfoKeys.find((eKey) => eKey.toLowerCase() === key.toLowerCase())
+      if (existingKey) {
+        return existingKey
+      }
+      return key
+    }
+    const postUrlChanged = () => {
+      usePage().postLocationHistoryChanged(
+        Object.fromEntries(
+          Array.from(new URLSearchParams(window.location.search)).map(([key, value]) => [replaceKey(key), value])
+        )
+      )
+    }
+    onMounted(() => {
+      window.addEventListener('popstate', postUrlChanged)
+    })
+    onUnmounted(() => {
+      window.removeEventListener('popstate', postUrlChanged)
+
+      useMessage().unsubscribe({
+        topic: 'init_canvas_deps',
+        subscriber: 'canvas_design_canvas'
+      })
+    })
+
     return {
       removeNode,
       canvasSrc,
@@ -186,15 +260,21 @@ export default {
         getMaterial: useMaterial().getMaterial,
         addHistory: useHistory().addHistory,
         request: getMetaApi(META_SERVICE.Http).getHttp(),
+        getPageById: getMetaApi(META_APP.AppManage).getPageById,
+        getPageAncestors: usePage().getAncestors,
+        getBaseInfo: () => getMetaApi(META_SERVICE.GlobalService).getBaseInfo(),
+        addHistoryDataChangedCallback,
         ast,
         getBlockByName: useMaterial().getBlockByName,
         useModal,
         useMessage,
         useNotify
       },
+      isBlock,
       CanvasLayout,
       canvasRef,
       CanvasContainer,
+      CanvasRouteBar,
       CanvasBreadcrumb
     }
   }