Merge pull request #1290 from opentiny/release-v2.4.0-merge

Release v2.4.0 merge

designer-demo/package.json

@@ -1,7 +1,7 @@
 {
   "name": "designer-demo",
   "private": true,
-  "version": "2.3.0",
+  "version": "2.4.0",
   "type": "module",
   "scripts": {
     "dev": "cross-env vite",

mockServer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-mock",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/block-compiler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-block-compiler",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/blockToWebComponentTemplate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-block-build",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "translate block to webcomponent template",
   "main": "./dist/web-components.es.js",
   "type": "module",

packages/build/vite-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-vite-config",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "",
   "type": "module",
   "main": "./index.js",

packages/build/vite-plugin-meta-comments/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-vite-plugin-meta-comments",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "",
   "type": "module",
   "main": "dist/index.cjs",

packages/builtinComponent/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-builtin-component",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "",
   "main": "dist/index.mjs",
   "module": "dist/index.mjs",

packages/canvas/DesignCanvas/src/DesignCanvas.vue

@@ -273,7 +273,7 @@ export default {
         getMaterial: useMaterial().getMaterial,
         addHistory: useHistory().addHistory,
         request: getMetaApi(META_SERVICE.Http).getHttp(),
-        getPageById: getMetaApi(META_APP.AppManage).getPageById,
+        getPageById: getMetaApi(META_APP.AppManage)?.getPageById,
         getPageAncestors: usePage().getAncestors,
         getBaseInfo: () => getMetaApi(META_SERVICE.GlobalService).getBaseInfo(),
         addHistoryDataChangedCallback,

packages/canvas/container/src/components/CanvasMenu.vue

@@ -145,6 +145,8 @@ export default {
 
     // 计算上下文菜单位置，右键时显示，否则关闭
 
+    const { PLUGIN_NAME, activeSetting } = useLayout()
+
     const operations = {
       del() {
         removeNodeById(getCurrent().schema?.id)
@@ -153,10 +155,10 @@ export default {
         copyNode(getCurrent().schema?.id)
       },
       config() {
-        useLayout().activeSetting('props')
+        activeSetting(PLUGIN_NAME.Props)
       },
       bindEvent() {
-        useLayout().activeSetting('event')
+        activeSetting(PLUGIN_NAME.Event)
       },
       insert({ value }) {
         emit('insert', value)

packages/canvas/container/src/components/CanvasResize.vue

@@ -10,7 +10,7 @@
   </div>
 </template>
 <script>
-import { ref, computed, watch, nextTick } from 'vue'
+import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
 import { useLayout, useCanvas } from '@opentiny/tiny-engine-meta-register'
 import { canvasState } from '../container'
 
@@ -90,6 +90,9 @@ export default {
       })
     }
 
+    const draggablePanel = ref(null)
+    watch(() => useLayout().getPluginWidth(draggablePanel.value), setScale, { flush: 'post' })
+
     watch(() => useLayout().getDimension().width, setScale, { flush: 'post', immediate: true })
 
     watch(() => useLayout().leftFixedPanelsStorage.value, setScale, { flush: 'post' })
@@ -98,6 +101,11 @@ export default {
       () => useLayout().getPluginState().render,
       (value) => {
         const currentFixed = useLayout().getPluginState().fixedPanels.includes(value)
+        const isPanelResizable = useLayout().isPanelWidthResizable(value)
+
+        if (isPanelResizable) {
+          draggablePanel.value = value
+        }
 
         if (!value || currentFixed) {
           setScale()
@@ -129,6 +137,18 @@ export default {
       }
     )
 
+    const handleResize = () => {
+      setScale()
+    }
+
+    onMounted(() => {
+      window.addEventListener('resize', handleResize)
+    })
+
+    onUnmounted(() => {
+      window.removeEventListener('resize', handleResize)
+    })
+
     return {
       onMouseDown,
       onMouseMove,

packages/canvas/container/src/keyboard.ts

@@ -143,8 +143,18 @@ const handleClipboardPaste = (event) => {
 const handleCopyEvent = (event) => {
   const selectedNodes = multiSelectedStates.value.map(({ schema }) => copyObject(schema))
 
-  const dataToCopy = JSON.stringify(selectedNodes)
-  setClipboardSchema(event, dataToCopy)
+  // 如果没有选中任何节点，直接返回
+  if (!selectedNodes.length) {
+    return
+  }
+
+  // 验证所有选中的节点是否有效（不为空）
+  const isValidNodes = selectedNodes.every((node) => node && Object.keys(node).length > 0)
+
+  if (isValidNodes) {
+    const dataToCopy = JSON.stringify(selectedNodes)
+    setClipboardSchema(event, dataToCopy)
+  }
 }
 
 const eventFiltersMap = new WeakMap()

packages/canvas/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-canvas",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/canvas/render/src/RenderMain.ts

@@ -63,7 +63,7 @@ const {
   getDataSourceMap
 })
 const { getRenderer, setRenderer } = useCustomRenderer()
-const { setCondition } = activePageContext
+const { setCondition, getConditions } = activePageContext
 const updateCanvas = () => {
   refreshKey.value++
 }
@@ -75,6 +75,8 @@ setCurrentApi({
   // 设置物料配置
   setConfigure,
   setCondition,
+  getController,
+  getConditions,
   getRenderer,
   setRenderer,
   getDesignMode,
@@ -91,7 +93,6 @@ const throttleUpdateSchema = useThrottleFn(
   true
 )
 
-const pageRenderer = getRenderer()
 const { routerViewSetting } = useRouterViewSetting()
 
 export default defineComponent({
@@ -275,6 +276,8 @@ export default defineComponent({
       )
     }
 
+    const pageRenderer = getRenderer()
+
     return () =>
       pageAncestors.value === null
         ? h(CanvasEmpty, { placeholderText: '页面分析加载中' })

packages/canvas/render/src/canvas-function/canvas-api.ts

@@ -3,16 +3,17 @@ import type { IPageContext } from '../page-block-function'
 import type { useCustomRenderer } from './custom-renderer'
 import type { removeBlockCompsCache, setConfigure } from '../material-function'
 import type { getDesignMode, setDesignMode } from './design-mode'
-import type { setController } from './controller'
+import type { setController, getController } from './controller'
 
 export interface IApplicationFunctionAPI
   extends Pick<ReturnType<typeof useUtils>, 'getUtils'>,
     Pick<ReturnType<typeof useDataSourceMap>, 'getDataSourceMap'> {}
-export type IPageContextAPI = Pick<IPageContext, 'setCondition'>
-export interface ICanvasFunctionAPI extends Pick<ReturnType<typeof useCustomRenderer>, 'getRenderer' | 'setRenderer'> {
+export type IPageContextAPI = Pick<IPageContext, 'setCondition' | 'getConditions'>
+export interface ICanvasFunctionAPI extends ReturnType<typeof useCustomRenderer> {
   getDesignMode: typeof getDesignMode
   setDesignMode: typeof setDesignMode
   setController: typeof setController
+  getController: typeof getController
   setConfigure: typeof setConfigure
   updateCanvas: () => void
 }
@@ -31,8 +32,10 @@ export function setCurrentApi(activeApi: IInnerCanvasAPI) {
 export const api: IInnerCanvasAPI = {
   getUtils: (...args) => currentApi?.getUtils(...args),
   setController: (...args) => currentApi?.setController(...args),
+  getController: (...args) => currentApi?.getController(...args),
   setConfigure: (...args) => currentApi?.setConfigure(...args),
   setCondition: (...args) => currentApi?.setCondition(...args),
+  getConditions: (...args) => currentApi?.getConditions(...args),
   getDataSourceMap: (...args) => currentApi?.getDataSourceMap(...args),
   getRenderer: (...args) => currentApi?.getRenderer(...args),
   setRenderer: (...args) => currentApi?.setRenderer(...args),

packages/canvas/render/src/runner.ts

@@ -66,7 +66,7 @@ const create = async (config) => {
   App = createApp(Main).use(TinyI18nHost).provide(I18nInjectionKey, TinyI18nHost)
 
   if (typeof appCreated === 'function') {
-    await appCreated(App)
+    await appCreated(App, { api: renderer })
   }
 
   App.config.globalProperties.lowcodeConfig = window.parent.TinyGlobalConfig

packages/common/component/PluginPanel.vue

@@ -121,18 +121,23 @@ export default {
 
     const MIN_WIDTH = PLUGIN_DEFAULT_WIDTH // 固定的最小宽度值
     const MAX_WIDTH = 1000 // 固定的最大宽度值
-    const panel = ref(null)
+    const panel = ref<HTMLElement | null>(null)
     let startX = 0
     let startWidth = 0
+    let rafId: number | null = null // 添加 requestAnimationFrame 标识
 
     const isCollapsed = ref(false)
     const settingIcon = computed(() => (isCollapsed.value ? 'collapse_all' : 'expand_all'))
 
     provide('isCollapsed', isCollapsed)
 
-    const panelState = inject('panelState')
+    interface PanelState {
+      emitEvent: (event: string, ...args: any[]) => void
+    }
+
+    const panelState = inject<PanelState>('panelState')
     const fixPanel = () => {
-      panelState.emitEvent('fixPanel', props.fixedName)
+      panelState?.emitEvent('fixPanel', props.fixedName)
     }
 
     const headerBottomLine = computed(() => (props.showBottomBorder ? 'header-bottom-line' : ''))
@@ -146,65 +151,101 @@ export default {
     const isRightResizer = ref(align.value.includes('right'))
     const isWidthResizable = computed(() => isPanelWidthResizable(props.fixedName))
 
-    const onMouseMoveRight = (event) => {
+    const updateWidth = (newWidth: number) => {
+      if (rafId) {
+        cancelAnimationFrame(rafId)
+      }
+
+      rafId = requestAnimationFrame(() => {
+        panelWidth.value = Math.max(MIN_WIDTH, Math.min(newWidth, MAX_WIDTH))
+        changePluginWidth(props.fixedName, panelWidth.value)
+      })
+    }
+
+    const onMouseMoveRight = (event: MouseEvent) => {
       const newWidth = startWidth + (event.clientX - startX)
-      panelWidth.value = Math.max(MIN_WIDTH, Math.min(newWidth, MAX_WIDTH))
-      changePluginWidth(props.fixedName, panelWidth.value)
+      updateWidth(newWidth)
     }
 
-    const onMouseMoveLeft = (event) => {
+    const onMouseMoveLeft = (event: MouseEvent) => {
       const newWidth = startWidth - (event.clientX - startX)
-      panelWidth.value = Math.max(MIN_WIDTH, Math.min(newWidth, MAX_WIDTH))
-      changePluginWidth(props.fixedName, panelWidth.value)
+      updateWidth(newWidth)
     }
 
-    const throttledMouseMoveRight = useThrottleFn(onMouseMoveRight, 50)
-    const throttledMouseMoveLeft = useThrottleFn(onMouseMoveLeft, 50)
+    // 降低节流时间，提高响应速度
+    const throttledMouseMoveRight = useThrottleFn(onMouseMoveRight, 16)
+    const throttledMouseMoveLeft = useThrottleFn(onMouseMoveLeft, 16)
 
-    const leftResizer = ref(null)
-    const rightResizer = ref(null)
+    type ResizerElement = HTMLElement | null
+
+    const leftResizer = ref<ResizerElement>(null)
+    const rightResizer = ref<ResizerElement>(null)
 
     const onMouseUpRight = () => {
       changeMoveDragBarState(false)
       document.removeEventListener('mousemove', throttledMouseMoveRight)
       document.removeEventListener('mouseup', onMouseUpRight)
-      rightResizer.value.style.cursor = ''
-      rightResizer.value.classList.remove('dragging')
+      document.body.style.cursor = ''
+      if (rightResizer.value) {
+        rightResizer.value.classList.remove('dragging')
+      }
+
+      // 清理 requestAnimationFrame
+      if (rafId) {
+        cancelAnimationFrame(rafId)
+        rafId = null
+      }
     }
 
-    const onMouseDownRight = (event) => {
+    const onMouseDownRight = (event: MouseEvent) => {
       changeMoveDragBarState(true)
       startX = event.clientX
-      startWidth = panel.value.offsetWidth
+      startWidth = panel.value?.offsetWidth || 0
       document.addEventListener('mousemove', throttledMouseMoveRight)
       document.addEventListener('mouseup', onMouseUpRight)
-      rightResizer.value.style.cursor = 'ew-resize'
-      rightResizer.value.classList.add('dragging')
+      document.body.style.cursor = 'col-resize'
+      if (rightResizer.value) {
+        rightResizer.value.classList.add('dragging')
+      }
     }
 
     const onMouseUpLeft = () => {
       changeMoveDragBarState(false)
       document.removeEventListener('mousemove', throttledMouseMoveLeft)
       document.removeEventListener('mouseup', onMouseUpLeft)
-      leftResizer.value.style.cursor = ''
-      leftResizer.value.classList.remove('dragging')
+      document.body.style.cursor = ''
+      if (leftResizer.value) {
+        leftResizer.value.classList.remove('dragging')
+      }
+
+      if (rafId) {
+        cancelAnimationFrame(rafId)
+        rafId = null
+      }
     }
 
-    const onMouseDownLeft = (event) => {
+    const onMouseDownLeft = (event: MouseEvent) => {
       changeMoveDragBarState(true)
       startX = event.clientX
-      startWidth = panel.value.offsetWidth
+      startWidth = panel.value?.offsetWidth || 0
       document.addEventListener('mousemove', throttledMouseMoveLeft)
       document.addEventListener('mouseup', onMouseUpLeft)
-      leftResizer.value.style.cursor = 'ew-resize'
-      leftResizer.value.classList.add('dragging')
+      document.body.style.cursor = 'col-resize'
+      if (leftResizer.value) {
+        leftResizer.value.classList.add('dragging')
+      }
     }
 
     const initResizerDOM = () => {
-      leftResizer.value = document.querySelector('.resizer-left')
-      rightResizer.value = document.querySelector('.resizer-right')
+      const leftEl = document.querySelector('.resizer-left')
+      const rightEl = document.querySelector('.resizer-right')
+      if (leftEl instanceof HTMLElement) {
+        leftResizer.value = leftEl
+      }
+      if (rightEl instanceof HTMLElement) {
+        rightResizer.value = rightEl
+      }
     }
-
     const clickCollapseIcon = () => {
       isCollapsed.value = !isCollapsed.value
       emit('updateCollapseStatus', isCollapsed.value)
@@ -289,11 +330,21 @@ export default {
   position: absolute;
   top: 0;
   right: 0;
-  width: 1px;
+  width: 3px;
   height: 100%;
-  cursor: ew-resize;
-  background-color: rgba(0, 0, 0, 0.1);
-  transition: width 0.3s ease;
+  cursor: col-resize;
+  background-color: transparent;
+  transition: background-color 0.3s ease;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 3px;
+    width: 1px;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.1);
+    transition: width 0.3s ease, background-color 0.3s ease;
+  }
 }
 
 .header-bottom-line {
@@ -301,13 +352,19 @@ export default {
 }
 
 .dragging {
-  width: 2px !important;
-  background-color: var(--te-component-common-resizer-border-color) !important;
+  background-color: var(--te-component-common-resizer-border-color);
+
+  &::after {
+    width: 2px !important;
+  }
 }
 
 .resizer-right:hover {
-  width: 2px;
   background-color: var(--te-component-common-resizer-border-color);
+
+  &::after {
+    width: 2px;
+  }
 }
 
 // 左边拖拽线
@@ -315,16 +372,29 @@ export default {
   position: absolute;
   top: 0;
   left: 0;
-  width: 1px;
+  width: 3px;
   height: 100%;
-  cursor: ew-resize;
-  background-color: rgba(0, 0, 0, 0.1);
-  transition: width 0.3s ease;
+  cursor: col-resize;
+  background-color: transparent;
+  transition: background-color 0.3s ease;
+
+  &::after {
+    content: '';
+    position: absolute;
+    right: 3px;
+    width: 1px;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.1);
+    transition: width 0.3s ease, background-color 0.3s ease;
+  }
 }
 
 .resizer-left:hover {
-  width: 2px;
   background-color: var(--te-component-common-resizer-border-color);
+
+  &::after {
+    width: 2px;
+  }
 }
 
 .scroll-content {

packages/common/js/http.js

@@ -12,7 +12,7 @@
 
 import { isVsCodeEnv } from './environments'
 import { generateRouter, generatePage } from './vscodeGenerateFile'
-import { usePage, useCanvas, useNotify, useBreadcrumb } from '@opentiny/tiny-engine-meta-register'
+import { usePage, useNotify, useBreadcrumb, useMessage } from '@opentiny/tiny-engine-meta-register'
 import { getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 
 /**
@@ -43,7 +43,6 @@ export const handlePageUpdate = (updateParams) => {
   return getMetaApi(META_SERVICE.Http)
     .post(`/app-center/api/pages/update/${id}`, params)
     .then((res) => {
-      const { setSaved } = useCanvas()
       if (isVsCodeEnv) {
         generatePage({
           id,
@@ -63,8 +62,11 @@ export const handlePageUpdate = (updateParams) => {
         useNotify({ message: '保存成功!', type: 'success' })
       }
 
-      // 更新 页面状态 标志
-      setSaved(true)
+      // 发布 Schema 变动通知
+      useMessage().publish({
+        topic: 'pageOrBlockInit',
+        data: params.page_content
+      })
 
       if (isCurEditPage) {
         const { setBreadcrumbPage } = useBreadcrumb()

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-common",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },
@@ -50,8 +50,8 @@
     "@opentiny/tiny-engine-vite-plugin-meta-comments": "workspace:*",
     "@vitejs/plugin-vue": "^5.1.2",
     "@vitejs/plugin-vue-jsx": "^4.0.1",
-    "glob": "^10.3.4",
     "@vueuse/core": "^9.6.0",
+    "glob": "^10.3.4",
     "vite": "^5.4.2"
   },
   "peerDependencies": {

packages/configurator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-configurator",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.js",

packages/design-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "type": "module",
   "description": "TinyEngine enables developers to customize low-code platforms, build low-bit platforms online in real time, and support secondary development or integration of low-bit platform capabilities.",
   "homepage": "https://opentiny.design/tiny-engine",

packages/engine-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-cli",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

packages/engine-cli/template/designer/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=

packages/engine-cli/template/designer/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

packages/engine-cli/template/designer/env/.env.production

@@ -1,7 +1,10 @@
 # prod mode, used by the "build:prod" 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=

packages/engine-cli/template/designer/package.json

@@ -11,8 +11,8 @@
     "serve:mock": "node node_modules/@opentiny/tiny-engine-mock/dist/app.js"
   },
   "dependencies": {
-    "@opentiny/tiny-engine": "2.3.0",
-    "@opentiny/tiny-engine-utils": "2.3.0",
+    "@opentiny/tiny-engine": "2.4.0",
+    "@opentiny/tiny-engine-utils": "2.4.0",
     "@opentiny/vue": "~3.20.0",
     "@opentiny/vue-design-smb": "~3.20.0",
     "@opentiny/vue-icon": "~3.20.0",
@@ -23,8 +23,8 @@
     "vue": "^3.4.21"
   },
   "devDependencies": {
-    "@opentiny/tiny-engine-mock": "2.3.0",
-    "@opentiny/tiny-engine-vite-config": "2.3.0",
+    "@opentiny/tiny-engine-mock": "2.4.0",
+    "@opentiny/tiny-engine-vite-config": "2.4.0",
     "@vitejs/plugin-vue": "^5.1.2",
     "cross-env": "^7.0.3",
     "vite": "^5.4.2",

packages/i18n/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-i18n-host",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/layout/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-layout",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "scripts": {
     "build": "vite build"
   },

packages/layout/src/DesignSettings.vue

@@ -198,7 +198,7 @@ export default {
 #tiny-engine-right-panel {
   height: calc(100vh - var(--base-top-panel-height));
   border-left: 1px solid var(--te-layout-common-border-color);
-  background: var(--ti-lowcode-common-component-bg);
+  background: var(--te-layout-common-bg-color);
   display: flex;
   flex-direction: column;
   position: absolute;
@@ -340,10 +340,10 @@ export default {
 
 @keyframes glow {
   0% {
-    box-shadow: inset 0px 0px 4px var(--ti-lowcode-canvas-handle-hover-bg);
+    box-shadow: inset 0px 0px 4px var(--te-layout-panel-active-color);
   }
   100% {
-    box-shadow: inset 0px 0px 14px var(--ti-lowcode-canvas-handle-hover-bg);
+    box-shadow: inset 0px 0px 14px var(--te-layout-panel-active-color);
   }
 }
 </style>

packages/layout/src/styles/vars.less

@@ -12,5 +12,5 @@
   --te-layout-common-icon-color: var(--te-common-icon-secondary);
   --te-layout-common-icon-bg-color-hover: var(--te-common-bg-disabled);
 
-  --te-layout-setting-bg-color-hover: var(--te-common-bg-primary-checked);
+  --te-layout-panel-active-color: var(--te-common-bg-primary-checked);
 }

packages/plugins/block/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-plugin-block",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/plugins/block/src/BlockSetting.vue

@@ -18,7 +18,6 @@
           @click="showDeployBlockDialog"
           >发布
         </tiny-button>
-        <svg-button name="text-copy-page" placement="bottom" tips="复制区块"></svg-button>
         <svg-button name="delete" tips="删除" placement="top" @click="deleteBlock"></svg-button>
         <close-icon @click="closePanel"></close-icon>
       </button-group>

packages/plugins/bridge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-plugin-bridge",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/plugins/datasource/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-plugin-datasource",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/plugins/help/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-plugin-help",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/plugins/i18n/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-plugin-i18n",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/plugins/i18n/src/Main.vue

@@ -53,7 +53,7 @@
           :tooltip-config="{ appendToBody: false, placement: 'right' }"
           :edit-rules="validRules"
         >
-          <tiny-grid-column type="selection" width="44"></tiny-grid-column>
+          <tiny-grid-column type="selection" width="42"></tiny-grid-column>
           <tiny-grid-column
             width="120"
             field="key"

packages/plugins/i18n/src/composable/useTranslate.ts

@@ -69,7 +69,7 @@ const removeI18n = (key = []) => {
 
 const ensureI18n = (obj: { [x: string]: any; key: string }, send?: boolean) => {
   const { locales } = i18nResource
-  const contents = Object.fromEntries(locales.map(({ lang }) => [lang, obj[lang]]))
+  const contents = Object.fromEntries(locales.map(({ lang }) => [lang, obj[lang] || '']))
   const langs = getLangs()
   const key = obj.key || utils.guid()
 

packages/plugins/materials/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-plugin-materials",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/plugins/materials/src/composable/useResource.ts

@@ -175,8 +175,8 @@ const fetchAppState = async () => {
 
   appSchemaState.bridge = appData.bridge
   appSchemaState.utils = appData.utils
-  appSchemaState.isDemo = appData.meta?.is_demo
-  appSchemaState.globalState = appData?.meta.global_state
+  appSchemaState.isDemo = appData?.meta?.isDemo || appData?.meta?.is_demo
+  appSchemaState.globalState = appData?.meta?.globaState || appData?.meta?.global_state
 
   // 词条语言为空时使用默认的语言
   const defaultLocales = [

packages/plugins/page/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-plugin-page",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/plugins/page/src/PageGeneral.vue

@@ -48,8 +48,8 @@
         <div class="tip">
           <span class="text" v-if="!pageSettingState.currentPageData.route">路由将以website.com开头</span>
           <span class="route-text" v-else>
-            <span class="text">website.com/</span>
-            <span class="text-dim">{{ currentRoute }}</span>
+            <span class="tip-text">website.com/</span>
+            <span class="tip-text-dim">{{ currentRoute }}</span>
           </span>
         </div>
       </tiny-form-item>
@@ -64,13 +64,11 @@
           placeholder="请选择默认跳转页"
           @change="changeDefaultPage"
         ></tiny-select>
-        <div v-if="state.defaultPageId" class="tip default-page">
-          <span class="text"
-            >访问<span class="text-dim">/{{ currentRoute }}</span
-            >路由，默认跳转<span class="text-dim"
-              >/{{ currentRoute }}/{{ pageSettingState?.defaultPage?.route }}</span
-            ></span
-          >
+        <div v-if="state.defaultPageId" class="tip">
+          <div class="tip-text">访问</div>
+          <span class="tip-text-dim">/{{ currentRoute }}</span>
+          <div class="tip-text">路由，默认跳转</div>
+          <span class="tip-text-dim">/{{ currentRoute }}/{{ pageSettingState?.defaultPage?.route }}</span>
         </div>
       </tiny-form-item>
     </tiny-form>
@@ -324,20 +322,18 @@ export default {
     color: var(--te-page-manage-tip-color);
     font-size: 12px;
     border-radius: 3px;
-    display: flex;
-    align-items: center;
-    height: 16px;
     margin-top: 4px;
-    .text {
-      color: var(--te-page-manage-tip-text-color);
-    }
-    .text-dim {
-      color: var(--te-page-manage-tip-dim-text-color);
-    }
-  }
-  .default-page {
+    width: 100%;
+    word-wrap: break-word;
     height: auto;
     line-height: 16px;
+    .tip-text {
+      width: 100%;
+      color: var(--te-page-manage-tip-text-color);
+    }
+    .tip-text-dim {
+      color: var(--te-page-manage-tip-dim-text-color);
+    }
   }
 }
 </style>

packages/plugins/page/src/PageSetting.vue

@@ -310,7 +310,11 @@ export default {
 
     const settingDefaultPage = async () => {
       const params = { ...pageSettingState.defaultPage, isDefault: true }
-      await updatePage(pageSettingState.defaultPage?.id, params, false)
+      updatePage(pageSettingState.defaultPage?.id, params, false).then((res) => {
+        if (res) {
+          editPage()
+        }
+      })
     }
 
     const createHistoryMessage = () => {
@@ -325,7 +329,7 @@ export default {
         const exec = () => {
           pageSettingState.currentPageData.message = state.historyMessage.trim() || 'Page auto save'
           if (pageSettingState.defaultPage?.id) {
-            settingDefaultPage().then(editPage)
+            settingDefaultPage()
           } else {
             editPage()
           }

packages/plugins/page/src/PageTree.vue

@@ -335,6 +335,7 @@ export default {
           .then((pageDetail) => {
             pageDetail.parentId = newParent.id
             if (pageDetail.isPage) {
+              pageDetail.isDefault = false
               updatePage(pageDetail)
             } else {
               updateFolder(pageDetail)

packages/plugins/page/src/Tree.vue

@@ -112,7 +112,7 @@ const nodesMap = computed(() => {
 })
 
 const filteredNodes = computed(() => {
-  return nodes.value.filter((node) => node.label.toLowerCase().includes(props.filterValue))
+  return nodes.value.filter((node) => node.label.toLowerCase().includes(props.filterValue.toLowerCase()))
 })
 
 const getAncestorIds = (nodeId) => {

packages/plugins/robot/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-plugin-robot",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/plugins/robot/src/Main.vue

@@ -467,6 +467,7 @@ export default {
     display: flex;
     align-items: center;
     height: 24px;
+    cursor: pointer;
   }
   .chat-title-label,
   .ml8 {
@@ -573,7 +574,7 @@ export default {
   color: var(--te-chat-model-ai-fail-text);
 }
 
-.chat-submit {
+.chat-submit.chat-submit {
   margin-top: 14px;
   font-size: 14px;
   display: flex;

packages/plugins/schema/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-plugin-schema",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/plugins/schema/src/Main.vue

@@ -58,6 +58,7 @@ export default {
     PluginPanel,
     IconDownloadLink: iconDownloadLink()
   },
+  inheritAttrs: false,
   props: {
     fixedPanels: {
       type: Array

packages/plugins/script/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-plugin-script",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/plugins/state/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-plugin-state",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/plugins/tree/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-plugin-tree",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/plugins/tutorial/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-plugin-tutorial",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/register/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-meta-register",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "",
   "type": "module",
   "main": "dist/index.js",

packages/register/src/constants.ts

@@ -17,7 +17,8 @@ export const META_SERVICE = {
   Help: 'engine.service.help',
   Property: 'engine.service.property',
   Properties: 'engine.service.properties',
-  ThemeSwitch: 'engine.service.themeSwitch'
+  ThemeSwitch: 'engine.service.themeSwitch',
+  Style: 'engine.service.style'
 }
 
 export const META_APP = {

packages/register/src/hooks.ts

@@ -37,7 +37,8 @@ export const HOOK_NAME = {
   useModal: 'modal',
   useNotify: 'notify',
   useCustom: 'custom',
-  useMaterial: 'material'
+  useMaterial: 'material',
+  useStyle: 'style'
 } as const
 
 type HookName = typeof HOOK_NAME[keyof typeof HOOK_NAME]
@@ -61,6 +62,7 @@ const hooksState = {
   [HOOK_NAME.useNotify]: {},
   [HOOK_NAME.useModal]: {},
   [HOOK_NAME.useMaterial]: {},
+  [HOOK_NAME.useStyle]: {},
   [HOOK_NAME.useCustom]: {} // 自定义
 }
 
@@ -89,6 +91,7 @@ export const useEnv = (...args: any[]): ImportMetaEnv => getHook(HOOK_NAME.useEn
 export const useModal = (...args: any[]): UseModalApi => getHook(HOOK_NAME.useModal, args)
 export const useNotify = (...args: NotifyParams): NotifyResult => getHook(HOOK_NAME.useNotify, args)
 export const useMaterial = (...args: any[]): UseMaterialApi => getHook(HOOK_NAME.useMaterial, args)
+export const useStyle = (...args: any[]) => getHook(HOOK_NAME.useStyle, args)
 export const useCustom = (...args: any[]) => getHook(HOOK_NAME.useCustom, args)
 
 export function initHook(

packages/settings/design/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-setting-design",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/settings/events/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-setting-events",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/settings/panel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-settings-panel",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/settings/props/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-setting-props",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/settings/styles/index.ts

@@ -12,9 +12,13 @@
 
 import entry from './src/Main.vue'
 import metaData from './meta'
+import { default as StyleService } from './src/js/index'
 import './src/styles/vars.less'
 
 export default {
   ...metaData,
+  metas: [StyleService],
   entry
 }
+
+export { StyleService }

packages/settings/styles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-setting-styles",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/settings/styles/src/components/classNamesContainer/index.vue

@@ -167,7 +167,8 @@ watch(
     classNameState.curSelector = className
     // 多类名的选择器的暂时不支持编辑，比如 .test1.test2
     classNameState.curSelectorEditable = getCurSelectorEditable(className)
-  }
+  },
+  { immediate: true }
 )
 
 const setSelectorProps = (type, value) => {

packages/settings/styles/src/components/spacing/SpacingGroup.vue

@@ -389,7 +389,7 @@
 </template>
 
 <script>
-import { computed, reactive } from 'vue'
+import { computed, reactive, watch } from 'vue'
 import SpacingSetting from './SpacingSetting.vue'
 import ModalMask, { useModal } from '../inputs/ModalMask.vue'
 import useEvent from '../../js/useEvent'
@@ -481,6 +481,17 @@ export default {
       emit('update', property)
     }
 
+    watch(
+      () => props.style,
+      (newStyle) => {
+        if (state.showModal) {
+          // 弹窗打开时，更新当前编辑的属性值
+          state.property.value = newStyle[state.property.name]
+        }
+      },
+      { deep: true }
+    )
+
     return {
       state,
       spacing,

packages/settings/styles/src/js/index.ts

@@ -0,0 +1,14 @@
+import { HOOK_NAME, META_SERVICE, defineService } from '@opentiny/tiny-engine-meta-register'
+import useStyle from './useStyle'
+
+export default defineService({
+  id: META_SERVICE.Style,
+  type: 'MetaService',
+  apis: useStyle(),
+  composable: {
+    name: HOOK_NAME.useStyle
+  },
+  init: () => {
+    useStyle().initStylePanelWatch()
+  }
+})

packages/settings/styles/src/js/useStyle.ts

@@ -338,17 +338,11 @@ const updateStyle = (properties: any) => {
   updateRect()
 }
 
-let hasWatchInitialized = false
-
 export default () => {
-  if (!hasWatchInitialized) {
-    initStylePanelWatch()
-    hasWatchInitialized = true
-  }
-
   return {
     state,
-    updateStyle
+    updateStyle,
+    initStylePanelWatch
   }
 }
 

packages/svgs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-svgs",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/theme/base/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-theme-base",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/toolbars/breadcrumb/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-toolbar-breadcrumb",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/toolbars/clean/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-toolbar-clean",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/toolbars/collaboration/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-toolbar-collaboration",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/toolbars/fullscreen/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-toolbar-fullscreen",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/toolbars/generate-code/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-toolbar-generate-code",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/toolbars/lang/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-toolbar-lang",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/toolbars/layout/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-toolbar-layout",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/toolbars/lock/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-toolbar-lock",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/toolbars/logo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-toolbar-logo",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/toolbars/logout/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-toolbar-logout",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/toolbars/media/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-toolbar-media",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/toolbars/preview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-toolbar-preview",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/toolbars/redoundo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-toolbar-redoundo",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/toolbars/refresh/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-toolbar-refresh",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/toolbars/save/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-toolbar-save",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/toolbars/setting/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-toolbar-setting",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/toolbars/themeSwitch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-toolbar-theme-switch",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/toolbars/view-setting/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-toolbar-view-setting",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-utils",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/vue-generator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-dsl-vue",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },

packages/webcomponent/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-webcomponent-core",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },