fix: canvas component border & switch style & add validator & tree plugin display sync & bind variable confirm disabled (#1659)

betterdancing · web-flow · commit cce05dcd498d · 2025-10-09T09:44:00.000+08:00
diff --git a/packages/canvas/DesignCanvas/src/DesignCanvas.vue b/packages/canvas/DesignCanvas/src/DesignCanvas.vue
@@ -87,6 +87,8 @@ export default {
       footData.value = useCanvas().getNodePath(node?.id)
       pageState.currentSchema = {}
       pageState.properties = null
+      // 删除节点后，重置pagestate中组件的属性
+      useProperties().getProps(null, null)
     }
 
     const isBlock = useCanvas().isBlock
@@ -106,9 +108,9 @@ export default {
           empty: () => '应用下暂无页面，需新建页面后体验画布功能',
           release: (type) => `当前${componentType[type]}未锁定，点击右上角 “锁定” 图标后编辑${componentType[type]}`,
           lock: (type) =>
-            `当前${componentType[type]}被 ${pageInfo?.username || ''} 锁定，如需编辑请先联系他解锁文件，然后再锁定该${
+            `当前${componentType[type]}被 ${pageInfo?.username || ''} 锁定，您可以创建新页面，如需编辑请先联系他解锁${
               componentType[type]
-            }后编辑！`
+            }，然后再锁定该${componentType[type]}后编辑！`
         }
 
         const renderMsg = message[pageStatus.state](pageSchema.componentName)
diff --git a/packages/canvas/container/src/components/CanvasAction.vue b/packages/canvas/container/src/components/CanvasAction.vue
@@ -251,7 +251,12 @@ export default {
     }
 
     const hide = () => {
-      getRenderer().setCondition(getCurrent().schema?.id, false)
+      if (getCurrent().schema?.id) {
+        const { clearSelect } = useCanvas().canvasApi.value
+        getRenderer().setCondition(getCurrent().schema?.id, false)
+        useCanvas().pageState.nodesStatus[getCurrent().schema?.id] = false
+        clearSelect()
+      }
       updateRect()
     }
 
diff --git a/packages/canvas/container/src/container.ts b/packages/canvas/container/src/container.ts
@@ -466,6 +466,34 @@ const setSelectRect = (
   )
 }
 
+const getElementDurationTime = (elementId?: string) => {
+  const element = elementId ? querySelectById(elementId) : getDocument().body
+  const transitionDuration = window.getComputedStyle(element).getPropertyValue('transition-duration')
+  const transitionDelay = window.getComputedStyle(element).getPropertyValue('transition-delay')
+  let delayTime = 0
+  const getMaxMillisecondNumber = (arr: string[]) => {
+    const millisecondNumber = arr.map((item) => {
+      const unit = item.slice(-2)
+      if (unit === 'ms') {
+        return parseFloat(item)
+      } else {
+        return parseFloat(item) * 1000
+      }
+    })
+    return millisecondNumber.length ? Math.max(...millisecondNumber) : 0
+  }
+  if (transitionDuration) {
+    const transitionDurations = transitionDuration.split(',')
+    delayTime += getMaxMillisecondNumber(transitionDurations)
+  }
+
+  if (transitionDelay) {
+    const transitionDelays = transitionDelay.split(',')
+    delayTime += getMaxMillisecondNumber(transitionDelays)
+  }
+  return delayTime === 0 ? 300 : delayTime
+}
+
 export const updateRect = (id?: string) => {
   id = (typeof id === 'string' && id) || getCurrent().schema?.id
   clearHover()
@@ -481,7 +509,8 @@ export const updateRect = (id?: string) => {
   const isBodySelected = !selectState.componentName && selectState.width > 0
 
   if (id || isBodySelected) {
-    setTimeout(() => setSelectRect(id))
+    const waitTime = getElementDurationTime(id)
+    setTimeout(() => setSelectRect(id), waitTime)
   } else {
     clearSelect()
   }
diff --git a/packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue b/packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="attr-header">
-    <span class="header-title">自定义属性</span>
+    <span class="header-title">原生属性</span>
     <tiny-popover
       v-model="state.visible"
       placement="bottom"
@@ -11,11 +11,18 @@
     >
       <div class="attr-form">
         <icon-close class="icon-close" @click="closePopover"></icon-close>
-        <tiny-form label-position="left" label-width="53px">
-          <tiny-form-item label="name">
+        <tiny-form
+          ref="attrFormRef"
+          :model="state.formData"
+          :rules="rules"
+          validate-type="text"
+          label-position="left"
+          label-width="53px"
+        >
+          <tiny-form-item label="name" prop="key">
             <tiny-input v-model="state.formData.key"></tiny-input>
           </tiny-form-item>
-          <tiny-form-item label="value">
+          <tiny-form-item label="value" prop="value">
             <tiny-input v-model="state.formData.value"></tiny-input>
           </tiny-form-item>
           <div class="footer">
@@ -80,9 +87,18 @@ export default {
       currentAttr: {}
     })
 
+    const attrFormRef = ref()
     const attrs = ref([])
     const properties = ['style']
 
+    const rules = {
+      key: [
+        { required: true, message: '名称必填', trigger: 'blur' },
+        { max: 20, message: '长度不大于20', trigger: 'change' }
+      ],
+      value: [{ max: 200, message: '长度不大于200', trigger: 'change' }]
+    }
+
     watchEffect(() => {
       if (!useProperties().getSchema()?.props) {
         return
@@ -143,24 +159,29 @@ export default {
     }
 
     const save = () => {
-      state.visible = false
-      const data = {}
-      let index = -1
+      attrFormRef.value.validate((valid) => {
+        if (!valid) {
+          return
+        }
+        state.visible = false
+        const data = {}
+        let index = -1
 
-      if (state.currentAttr.id) {
-        index = attrs.value.findIndex((item) => item.id === state.currentAttr.id)
-        data.id = state.currentAttr.id
-        state.currentAttr = {}
-      } else {
-        data.id = utils.guid()
-        index = attrs.value.length
-      }
+        if (state.currentAttr.id) {
+          index = attrs.value.findIndex((item) => item.id === state.currentAttr.id)
+          data.id = state.currentAttr.id
+          state.currentAttr = {}
+        } else {
+          data.id = utils.guid()
+          index = attrs.value.length
+        }
 
-      data.text = `${state.formData.key} = '${state.formData.value}'`
-      data.data = { key: state.formData.key, value: state.formData.value }
+        data.text = `${state.formData.key} = '${state.formData.value}'`
+        data.data = { key: state.formData.key, value: state.formData.value }
 
-      attrs.value.splice(index, 1, data)
-      updateSchema()
+        attrs.value.splice(index, 1, data)
+        updateSchema()
+      })
     }
 
     const edit = (attr) => {
@@ -186,7 +207,9 @@ export default {
     }
 
     return {
+      attrFormRef,
       state,
+      rules,
       cancel,
       save,
       attrs,
@@ -247,6 +270,11 @@ export default {
     display: grid;
     grid-template-columns: 3fr auto;
 
+    .item-content {
+      word-wrap: break-word;
+      white-space: normal;
+      word-break: break-all;
+    }
     .item-controller {
       display: grid;
       column-gap: 3px;
diff --git a/packages/configurator/src/slot-configurator/SlotConfigurator.vue b/packages/configurator/src/slot-configurator/SlotConfigurator.vue
@@ -185,7 +185,7 @@ export default {
 .e__switch-core::after {
   content: '';
   position: absolute;
-  top: 1px;
+  top: 2px;
   left: 1px;
   border-radius: 100%;
   transition: all 0.3s;
diff --git a/packages/configurator/src/variable-configurator/VariableConfigurator.vue b/packages/configurator/src/variable-configurator/VariableConfigurator.vue
@@ -70,6 +70,7 @@
                 :value="state.variable"
                 :options="editorOptions"
                 @editorDidMount="editorDidMount"
+                @change="editorChange"
               ></monaco-editor>
               <div v-if="isDataSource" class="datasource-poll-wrap">
                 <tiny-tooltip
@@ -109,10 +110,12 @@
 
     <template #footer>
       <div class="bind-dialog-footer">
-        <tiny-button type="danger" plain @click="remove">移除绑定</tiny-button>
+        <tiny-button type="danger" plain :disabled="modelValue?.type !== 'JSExpression'" @click="remove"
+          >移除绑定</tiny-button
+        >
         <div class="right">
           <tiny-button @click="cancel">取 消</tiny-button>
-          <tiny-button type="info" @click="confirm">确 定</tiny-button>
+          <tiny-button type="info" :disabled="confirmDisabled" @click="confirm">确 定</tiny-button>
         </div>
       </div>
     </template>
@@ -259,6 +262,8 @@ export default {
 
     const isDataSource = computed(() => state.active === CONSTANTS.DATASOUCE)
 
+    const confirmDisabled = computed(() => !state.variable?.trim?.())
+
     // 每次弹窗打开时都记录下绑定变量的旧值，用来判断保存按钮状态
     watch(
       () => state.isVisible,
@@ -308,6 +313,10 @@ export default {
       })
     }
 
+    const editorChange = (value) => {
+      state.variable = value
+    }
+
     const removeInterval = (start, end, intervalId, pageSchema) => {
       const unmountedFn = pageSchema.lifeCycles?.onUnmounted?.value
       const fetchBody = `
@@ -542,7 +551,9 @@ export default {
     }
 
     return {
+      confirmDisabled,
       editorDidMount,
+      editorChange,
       editorOptions,
       variableClick,
       remove,
diff --git a/packages/plugins/materials/src/composable/useResource.ts b/packages/plugins/materials/src/composable/useResource.ts
@@ -119,6 +119,7 @@ const initBlock = async (blockId: string) => {
 const initPageOrBlock = async () => {
   const { pageId, blockId } = getMetaApi(META_SERVICE.GlobalService).getBaseInfo()
   const pagePluginApi = getMetaApi(META_APP.AppManage)
+  const globalState = getMetaApi(META_SERVICE.GlobalService).getState()
 
   if (pageId) {
     const data = await pagePluginApi.getPageById(pageId)
@@ -132,15 +133,38 @@ const initPageOrBlock = async () => {
     return
   }
 
-  // url 没有 pageid 或 blockid，到页面首页或第一页
-  const pageInfo = appSchemaState.pageTree.find((page) => page?.meta?.isHome) ||
-    appSchemaState.pageTree.find(
+  // url 没有 pageid 或 blockid，页面打开顺序：可访问主页 -> 可访问的第一个页面 -> 不可访问首页 -> 不可访问全页面顺位第一页
+  const getPageInfo = () => {
+    // 页面是否被他人锁定 (被锁定 且 非当前用户锁定)
+    const isPageOccupierdByOthers = (page) => {
+      return page.meta?.occupier && page.meta.occupier.id !== globalState.userInfo.id
+    }
+    // 首页
+    const homePage = appSchemaState.pageTree.find((page) => page?.meta?.isHome)
+    // 顺位首个页面
+    const firstPage = appSchemaState.pageTree.find(
       (page) => page.componentName === COMPONENT_NAME.Page && page?.meta?.group !== 'publicPages'
-    ) || {
+    )
+    // 顺位首个可访问页面(当前用户锁定 或 未锁定)
+    const firstUnoccupiedPage = appSchemaState.pageTree.find(
+      (page) =>
+        page.componentName === COMPONENT_NAME.Page &&
+        page?.meta?.group !== 'publicPages' &&
+        !isPageOccupierdByOthers(page)
+    )
+    // 空页面
+    const emptyPage = {
       page_content: {
         componentName: COMPONENT_NAME.Page
       }
     }
+    // 可访问主页 (当前用户锁定 或 未锁定)
+    if (homePage && !isPageOccupierdByOthers(homePage)) {
+      return homePage
+    }
+    return firstUnoccupiedPage || homePage || firstPage || emptyPage
+  }
+  const pageInfo = getPageInfo()
 
   if (pageInfo.meta?.id) {
     // 这里重新请求一遍页面详情数据，是因为 appSchemaState 的页面信息存在字段转换，比如 route 被转换成了 router 字段，导致调用页面保存接口的时候报错
diff --git a/packages/plugins/tree/src/Main.vue b/packages/plugins/tree/src/Main.vue
@@ -27,7 +27,10 @@
               row.label
             }}</span>
             <template v-if="row.id !== 'body'">
-              <svg-icon :name="eyeOpen(row.id) ? 'eye' : 'eye-invisible'" @mouseup="showNode(row.rawData)"></svg-icon>
+              <svg-icon
+                :name="eyeOpen(row.id) ? 'eye' : 'eye-invisible'"
+                @click="showNode($event, row.rawData)"
+              ></svg-icon>
               <svg-icon name="delete" @mouseup="delNode(row.rawData)"></svg-icon>
             </template>
           </div>
@@ -96,7 +99,6 @@ export default {
       const translateChild = (data) => {
         data.forEach((item) => {
           item.show = pageState.nodesStatus[item.id] !== false
-          item.showEye = !item.show
           const child = item.children
           if (Array.isArray(child)) {
             translateChild(item.children)
@@ -150,14 +152,17 @@ export default {
       return pageState.nodesStatus[id] !== false
     }
 
-    const showNode = (data) => {
-      data.show = !data.show
-      pageState.nodesStatus[data.id] = data.show
+    const showNode = (event, data) => {
+      pageState.nodesStatus[data.id] = !(pageState.nodesStatus[data.id] !== false)
+      data.show = pageState.nodesStatus[data.id]
 
       const { getRenderer, clearSelect } = useCanvas().canvasApi.value
 
       getRenderer().setCondition(data.id, data.show)
-      clearSelect()
+      if (!data.show) {
+        event?.stopPropagation()
+        clearSelect()
+      }
     }
 
     const delNode = (data) => {

Original file line number	Diff line number	Diff line change
`@@ -251,7 +251,12 @@ export default {`
`251`	`251`	`}`
`252`	`252`
`253`	`253`	`const hide = () => {`
`254`		`- getRenderer().setCondition(getCurrent().schema?.id, false)`
	`254`	`+ if (getCurrent().schema?.id) {`
	`255`	`+ const { clearSelect } = useCanvas().canvasApi.value`
	`256`	`+ getRenderer().setCondition(getCurrent().schema?.id, false)`
	`257`	`+ useCanvas().pageState.nodesStatus[getCurrent().schema?.id] = false`
	`258`	`+ clearSelect()`
	`259`	`+ }`
`255`	`260`	`updateRect()`
`256`	`261`	`}`
`257`	`262`