refactor: base properties configurable via registry (opentiny#555)

* refactor: base properties configurable * refactor: base properties configurable via registry * refactor: migrate to useMaterial * refactor: rename file * feat: add group and insertPosition options for base properties * feat: add additional condition * feat: unifiy 'others' group * feat: unifiy 'others' label
betterdancing · Aug 12, 2024 · 46be85d · 46be85d
1 parent f44b525
commit 46be85d
Show file tree

Hide file tree

Showing 10 changed files with 116 additions and 75 deletions.
diff --git a/designer-demo/public/mock/bundle.json b/designer-demo/public/mock/bundle.json
@@ -7410,7 +7410,7 @@
               {
                 "name": "1",
                 "label": {
-                  "zh_CN": "其他配置"
+                  "zh_CN": "其他"
                 },
                 "content": [
                   {
@@ -9917,7 +9917,7 @@
               },
               {
                 "label": {
-                  "zh_CN": "其他属性"
+                  "zh_CN": "其他"
                 },
                 "description": {
                   "zh_CN": "其他属性"

diff --git a/mockServer/src/assets/json/appinfo.json b/mockServer/src/assets/json/appinfo.json
@@ -7317,7 +7317,7 @@
                   {
                     "name": "1",
                     "label": {
-                      "zh_CN": "其他配置"
+                      "zh_CN": "其他"
                     },
                     "content": [
                       {
@@ -12426,7 +12426,7 @@
                   },
                   {
                     "label": {
-                      "zh_CN": "其他属性"
+                      "zh_CN": "其他"
                     },
                     "description": {
                       "zh_CN": "其他属性"
@@ -24081,7 +24081,7 @@
             {
               "name": "1",
               "label": {
-                "zh_CN": "其他配置"
+                "zh_CN": "其他"
               },
               "content": [
                 {
@@ -26586,7 +26586,7 @@
             },
             {
               "label": {
-                "zh_CN": "其他属性"
+                "zh_CN": "其他"
               },
               "description": {
                 "zh_CN": "其他属性"

diff --git a/mockServer/src/assets/json/bundle.json b/mockServer/src/assets/json/bundle.json
@@ -4687,7 +4687,7 @@
               {
                 "name": "1",
                 "label": {
-                  "zh_CN": "其他配置"
+                  "zh_CN": "其他"
                 },
                 "content": [
                   {
@@ -7192,7 +7192,7 @@
               },
               {
                 "label": {
-                  "zh_CN": "其他属性"
+                  "zh_CN": "其他"
                 },
                 "description": {
                   "zh_CN": "其他属性"

diff --git a/packages/engine-cli/template/designer/public/mock/bundle.json b/packages/engine-cli/template/designer/public/mock/bundle.json
@@ -7410,7 +7410,7 @@
               {
                 "name": "1",
                 "label": {
-                  "zh_CN": "其他配置"
+                  "zh_CN": "其他"
                 },
                 "content": [
                   {
@@ -9917,7 +9917,7 @@
               },
               {
                 "label": {
-                  "zh_CN": "其他属性"
+                  "zh_CN": "其他"
                 },
                 "description": {
                   "zh_CN": "其他属性"

diff --git a/packages/plugins/materials/index.js b/packages/plugins/materials/index.js
@@ -17,14 +17,16 @@ import MaterialLayout from './src/meta/layout'
 import MaterialBlock from './src/meta/block'
 import MaterialComponent from './src/meta/component'
 import MaterialHeader from './src/components/header/Main.vue'
+import { basePropertyOptions } from './src/js/options'
 
 export default {
   ...metaData,
   entry,
   layout: MaterialLayout,
   options: {
     defaultTabId: 'engine.plugins.materials.component',
-    displayComponentIds: ['engine.plugins.materials.component', 'engine.plugins.materials.block']
+    displayComponentIds: ['engine.plugins.materials.component', 'engine.plugins.materials.block'],
+    basePropertyOptions
   },
   components: {
     header: MaterialHeader

diff --git a/packages/plugins/materials/src/composable/useMaterial.js b/packages/plugins/materials/src/composable/useMaterial.js
@@ -14,7 +14,8 @@ import { reactive } from 'vue'
 import { useHttp } from '@opentiny/tiny-engine-http'
 import { utils, constants } from '@opentiny/tiny-engine-utils'
 import { meta as BuiltinComponentMaterials } from '@opentiny/tiny-engine-builtin-component'
-import { getMergeMeta, useNotify, useCanvas, useBlock } from '@opentiny/tiny-engine-meta-register'
+import { getMergeMeta, getOptions, useNotify, useCanvas, useBlock } from '@opentiny/tiny-engine-meta-register'
+import meta from '../../meta'
 
 const { camelize, capitalize } = utils
 const { MATERIAL_TYPE } = constants
@@ -76,11 +77,49 @@ const getConfigureMap = () => {
   return Object.fromEntries(entries)
 }
 
+/**
+ * 附加基础属性，基础属性可以通过注册表配置
+ * @param {any[]} schemaProperties
+ * @returns
+ */
+const patchBaseProps = (schemaProperties) => {
+  if (!Array.isArray(schemaProperties)) {
+    return
+  }
+
+  const { properties = [], insertPosition = 'end' } = getOptions(meta.id).basePropertyOptions || {}
+
+  for (const basePropGroup of properties) {
+    const group = schemaProperties.find((item) => {
+      // 如果存在了包含'其他'字符串的分组，统一为'其他'分组
+      if (item.label.zh_CN.includes('其他')) {
+        item.label.zh_CN = '其他'
+      }
+
+      return (
+        (basePropGroup.group && basePropGroup.group === item.group) || basePropGroup.label.zh_CN === item.label.zh_CN
+      )
+    })
+
+    if (group) {
+      if (insertPosition === 'start') {
+        group.content.splice(0, 0, ...basePropGroup.content)
+      } else {
+        group.content.push(...basePropGroup.content)
+      }
+    } else {
+      schemaProperties.push(basePropGroup)
+    }
+  }
+}
+
 /**
  * 将component里的内容注册到resource变量中
  * @param {*} data
  */
 const registerComponentToResource = (data) => {
+  patchBaseProps(data.schema?.properties)
+
   if (Array.isArray(data.component)) {
     const { component, ...others } = data
     component.forEach((item) => {

diff --git a/packages/plugins/materials/src/js/options.js b/packages/plugins/materials/src/js/options.js
@@ -0,0 +1,61 @@
+export const basePropertyOptions = {
+  properties: [
+    {
+      group: 'others',
+      label: {
+        zh_CN: '其他'
+      },
+      content: [
+        {
+          property: 'id',
+          type: 'string',
+          defaultValue: '',
+          label: {
+            text: {
+              zh_CN: '元素id值'
+            }
+          },
+          cols: 12,
+          rules: [],
+          widget: {
+            component: 'InputConfigurator',
+            props: {}
+          }
+        },
+        {
+          property: 'className',
+          type: 'string',
+          defaultValue: '',
+          label: {
+            text: {
+              zh_CN: '样式类'
+            }
+          },
+          cols: 12,
+          rules: [],
+          widget: {
+            component: 'InputConfigurator',
+            props: {}
+          }
+        },
+        {
+          property: 'ref',
+          type: 'string',
+          defaultValue: '',
+          label: {
+            text: {
+              zh_CN: 'ref引用类'
+            }
+          },
+          cols: 12,
+          rules: [],
+          widget: {
+            component: 'InputConfigurator',
+            props: {}
+          }
+        }
+      ]
+    }
+  ],
+  insertPosition: 'start' // 'start' | 'end'
+}
diff --git a/packages/settings/design/src/schemas/grid.json b/packages/settings/design/src/schemas/grid.json
@@ -377,7 +377,7 @@
       },
       {
         "label": {
-          "zh_CN": "其他属性"
+          "zh_CN": "其他"
         },
         "description": {
           "zh_CN": "其他属性"

diff --git a/packages/settings/design/src/schemas/search.json b/packages/settings/design/src/schemas/search.json
@@ -105,7 +105,7 @@
       {
         "name": "1",
         "label": {
-          "zh_CN": "其他配置"
+          "zh_CN": "其他"
         },
         "content": [
           {

diff --git a/packages/settings/props/src/composable/useProperties.js b/packages/settings/props/src/composable/useProperties.js
@@ -17,66 +17,6 @@ import { useCanvas, useMaterial, useTranslate } from '@opentiny/tiny-engine-meta
 const { COMPONENT_NAME } = constants
 const propsUpdateKey = ref(0)
 
-const otherBaseKey = {
-  className: {
-    property: 'className',
-    type: 'string',
-    defaultValue: '',
-    label: {
-      text: {
-        zh_CN: '样式类'
-      }
-    },
-    cols: 12,
-    rules: [],
-    widget: {
-      component: 'InputConfigurator',
-      props: {}
-    }
-  },
-  id: {
-    property: 'id',
-    type: 'string',
-    defaultValue: '',
-    label: {
-      text: {
-        zh_CN: '元素id值'
-      }
-    },
-    cols: 12,
-    rules: [],
-    widget: {
-      component: 'InputConfigurator',
-      props: {}
-    }
-  },
-  ref: {
-    property: 'ref',
-    type: 'string',
-    defaultValue: '',
-    label: {
-      text: {
-        zh_CN: 'ref引用类'
-      }
-    },
-    cols: 12,
-    rules: [],
-    widget: {
-      component: 'InputConfigurator',
-      props: {}
-    }
-  }
-}
-
-const patchOtherName = (content = []) => {
-  const otherName = ['ref', 'className', 'id']
-  otherName.forEach((e) => {
-    if (!content.find(({ property }) => property === e)) {
-      content.unshift(JSON.parse(JSON.stringify(otherBaseKey[e])))
-    }
-  })
-}
-
 const getSlotSwitch = (properties, slots = {}) => {
   if (Object.keys(slots).length) {
     properties.push({
@@ -164,7 +104,6 @@ const getProps = (schema, parent) => {
     const schemaProps = properties || metaSchema?.properties || content?.schema?.properties || []
     const propGroups = [...schemaProps]
 
-    patchOtherName(propGroups[0]?.content)
     getSlotSwitch(propGroups, metaSchema?.slots)
     useCanvas().pageState.properties = mergeProps(toRaw(props), propGroups)
   } else if (!schema) {