Merge branch 'refactor/develop' into feat/materials-new-protocol

yy-wow · Jan 15, 2025 · 58a3376 · 58a3376
2 parents 12f43b0 + 2e16346
commit 58a3376
Show file tree

Hide file tree

Showing 110 changed files with 4,698 additions and 1,731 deletions.
diff --git a/designer-demo/registry.js b/designer-demo/registry.js
@@ -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

diff --git a/jsconfig.json b/jsconfig.json
@@ -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/*"],

diff --git a/package.json b/package.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",

diff --git a/packages/block-compiler/package.json b/packages/block-compiler/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"

diff --git a/packages/build/vite-config/src/default-config.js b/packages/build/vite-config/src/default-config.js
@@ -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: {

diff --git a/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js b/packages/build/vite-config/src/vite-plugins/devAliasPlugin.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'),

diff --git a/packages/canvas/.eslintrc.cjs b/packages/canvas/.eslintrc.cjs
@@ -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'
   }
 }
diff --git a/packages/canvas/DesignCanvas/src/DesignCanvas.vue b/packages/canvas/DesignCanvas/src/DesignCanvas.vue
@@ -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,7 +57,7 @@ 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([])
@@ -81,6 +87,8 @@ export default {
       pageState.properties = null
     }
 
+    const isBlock = useCanvas().isBlock
+
     watch(
       [() => useCanvas().isSaved(), () => useLayout().layoutState.pageStatus, () => useCanvas().getPageSchema()],
       ([isSaved, pageStatus, pageSchema], [oldIsSaved, _oldPageStatus, oldPageSchema]) => {
@@ -181,6 +189,58 @@ 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)
+    })
+
     return {
       removeNode,
       canvasSrc,
@@ -194,15 +254,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
     }
   }

diff --git a/packages/canvas/DesignCanvas/src/api/useCanvas.js b/packages/canvas/DesignCanvas/src/api/useCanvas.js
@@ -102,7 +102,7 @@ const jsonDiffPatchInstance = jsonDiffPatch.create({
     diffMatchPatch: DiffMatchPatch,
     minLength: 60
   },
-  // eslint-disable-next-line no-unused-vars
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   propertyFilter: function (name, context) {
     return name.slice(0, 1) !== '$'
   },

diff --git a/packages/canvas/common/src/constant.js b/packages/canvas/common/src/constant.js
@@ -1,6 +1,7 @@
 export const NODE_UID = 'data-uid'
 export const NODE_TAG = 'data-tag'
 export const NODE_LOOP = 'loop-id'
+export const NODE_INACTIVE_UID = 'data-ia-uid'
 
 export const DESIGN_MODE = {
   DESIGN: 'design', // 设计态

diff --git a/packages/canvas/common/src/utils.js b/packages/canvas/common/src/utils.js
@@ -55,27 +55,6 @@ export const copyObject = (node) => {
   return node
 }
 
-/**
- * 从页面importmap中获取模块的名称
- * @returns importmap中模块的名称集合
- */
-const getImportMapKeys = () => {
-  try {
-    const importMapElement = document.querySelector('script[type="importmap"]')
-
-    if (!importMapElement) {
-      return []
-    }
-
-    const importMaps = importMapElement.textContent
-    const importMapObject = JSON.parse(importMaps || '{}') || {}
-
-    return Object.keys(importMapObject.imports)
-  } catch (error) {
-    return []
-  }
-}
-
 /**
  * 动态导入获取组件库模块
  * @param {*} pkg 模块名称
@@ -87,24 +66,20 @@ const dynamicImportComponentLib = async ({ pkg, script }) => {
     return window.TinyComponentLibs[pkg]
   }
 
-  let modules = {}
+  if (!script) {
+    return {}
+  }
+
+  const href = window.parent.location.href || location.href // 这里要取父窗口的地址，因为在iframe中href是about:srcdoc
+  const scriptUrl = script.startsWith('.') ? new URL(script, href).href : script
 
-  try {
-    // 优先从importmap导入，兼容npm.script字段定义的cdn地址
-    const importMapKeys = getImportMapKeys()
+  if (!window.TinyComponentLibs[pkg]) {
+    const modules = await import(/* @vite-ignore */ scriptUrl)
 
-    if (importMapKeys.includes(pkg)) {
-      modules = await import(/* @vite-ignore */ pkg)
-    } else if (script) {
-      modules = await import(/* @vite-ignore */ script)
-    }
-  } catch (error) {
-    modules = {}
+    window.TinyComponentLibs[pkg] = modules
   }
 
-  window.TinyComponentLibs[pkg] = modules
-
-  return modules
+  return window.TinyComponentLibs[pkg]
 }
 
 /**