types: add types to useProperties, useProperty and useSaveLocal (#1265)

Author: gene9831

packages/canvas/DesignCanvas/src/api/types.ts

@@ -4,9 +4,11 @@ export type PageSchema = RootNode
 
 export interface PageState {
   currentVm?: unknown
-  currentSchema?: unknown
+  currentSchema?: { [x: string]: any; id: string }
   currentType?: unknown
-  currentPage?: unknown
+  currentPage?: { [x: string]: any; id: string; name: string } | null
+  currentPageId?: string
+  currentPageName?: string
   hoverVm?: unknown
   pageSchema: RootNode | null
   properties?: unknown

packages/canvas/index.ts

@@ -29,3 +29,5 @@ export default {
   layout: CanvasLayout,
   metas: [CanvasContainer]
 }
+
+export * from './DesignCanvas/src/api/types'

packages/plugins/materials/index.ts

@@ -46,3 +46,4 @@ export default {
 }
 
 export { entry, ResourceService, MaterialService }
+export * from './src/composable/types'

packages/settings/props/src/composable/useProperties.ts

@@ -13,11 +13,12 @@
 import { toRaw, shallowReactive, ref } from 'vue'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { useCanvas, useMaterial, useTranslate } from '@opentiny/tiny-engine-meta-register'
+import type { Property, Schema } from '@opentiny/tiny-engine-plugin-materials'
 
 const { COMPONENT_NAME } = constants
 const propsUpdateKey = ref(0)
 
-const getSlotSwitch = (properties, slots = {}) => {
+const getSlotSwitch = (properties: Property[], slots: Record<string, any> = {}) => {
   if (Object.keys(slots).length) {
     properties.push({
       label: {
@@ -52,7 +53,7 @@ const getSlotSwitch = (properties, slots = {}) => {
  * @param {*} groups 组件元数据
  * @returns
  */
-const mergeProps = (pageProps = {}, groups = []) => {
+const mergeProps = (pageProps: Record<string, any> = {}, groups: Property[] = []) => {
   const group = groups.map(({ content = [], ...group }) => {
     return {
       ...group,
@@ -71,7 +72,7 @@ const mergeProps = (pageProps = {}, groups = []) => {
   return group
 }
 
-const translateProp = (value) => {
+const translateProp = (value: { type: string }) => {
   if (value?.type === 'i18n') {
     return useTranslate().translate(value)
   }
@@ -84,14 +85,15 @@ const translateProp = (value) => {
  * @param {*} instance 画布上当前选中节点信息
  */
 
-const properties = shallowReactive({
+const properties = shallowReactive<{ schema: Schema | null; parent: Schema | null }>({
   schema: null,
   parent: null
 })
 
-const isPageOrBlock = (schema) => [COMPONENT_NAME.Block, COMPONENT_NAME.Page].includes(schema?.componentName)
+const isPageOrBlock = (schema: Schema) =>
+  [COMPONENT_NAME.Block, COMPONENT_NAME.Page].includes(schema?.componentName || '')
 
-const getProps = (schema, parent) => {
+const getProps = (schema: Schema, parent: Schema) => {
   // 1 现在选中的节点和当前节点一样，不需要重新计算, 2 默认进来由于scheme和properities.schema相等，因此判断如果是“页面或者区块”需要进入if判断
   if (schema && (properties.schema !== schema || isPageOrBlock(schema))) {
     const { props, componentName } = schema
@@ -114,7 +116,7 @@ const getProps = (schema, parent) => {
   properties.parent = parent
 }
 
-const setProp = (name, value, type) => {
+const setProp = (name: string, value: unknown, type?: unknown) => {
   if (!properties.schema) {
     return
   }
@@ -134,37 +136,37 @@ const setProp = (name, value, type) => {
 
   useCanvas().operateNode({
     type: 'changeProps',
-    id: properties.schema.id,
+    id: properties.schema.id || '',
     value: { props: newProps },
     option: { overwrite }
   })
 
   propsUpdateKey.value++
 }
 
-const getProp = (key) => {
-  return (properties.schema.props || {})[key]
+const getProp = (key: string) => {
+  return (properties.schema?.props || {})[key]
 }
 
-const delProp = (name) => {
-  const newProps = { ...(properties.schema.props || {}) }
+const delProp = (name: string) => {
+  const newProps = { ...(properties.schema?.props || {}) }
 
   delete newProps[name]
 
   useCanvas().operateNode({
     type: 'changeProps',
-    id: properties.schema.id,
+    id: properties.schema?.id || '',
     value: { props: newProps },
     option: { overwrite: true }
   })
   propsUpdateKey.value++
 }
 
-const setProps = (schema) => {
+const setProps = (schema: Schema) => {
   Object.entries(schema.props || {}).map(([key, value]) => setProp(key, value))
 }
 
-const getSchema = (parent) => {
+const getSchema = (parent: boolean) => {
   return parent ? properties : properties.schema
 }
 

packages/settings/props/src/composable/useProperty.ts

@@ -13,11 +13,20 @@
 import { computed } from 'vue'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { useBlock } from '@opentiny/tiny-engine-meta-register'
+import type { PageState } from '@opentiny/tiny-engine-canvas'
+import type { Property, Linked } from '@opentiny/tiny-engine-plugin-materials'
 
 const { SCHEMA_DATA_TYPE } = constants
 
+interface AddPropertyLinksOptions {
+  linked: Linked
+  propertyName: string
+  componentProperties: Property[]
+  defaultValue: unknown
+}
+
 // 给组件属性添加关联信息
-const addPropertyLinks = ({ linked, propertyName, componentProperties }) => {
+const addPropertyLinks = ({ linked, propertyName, componentProperties, defaultValue: _ }: AddPropertyLinksOptions) => {
   for (let i = 0; i < componentProperties.length; i++) {
     const propertyList = componentProperties[i].content
 
@@ -41,8 +50,16 @@ const addPropertyLinks = ({ linked, propertyName, componentProperties }) => {
   }
 }
 
+interface FindLinkedOptions {
+  componentProperties: Property[]
+  componentId: string
+  blockProperties: Property['content'][number][]
+}
+
 // 遍历区块属性，查找已关联的组件属性
-const findLinked = ({ componentProperties, componentId, blockProperties }) => {
+const findLinked = (options: FindLinkedOptions) => {
+  const { componentProperties, componentId, blockProperties } = options
+
   for (let i = 0; i < blockProperties.length; i++) {
     const property = blockProperties[i]
 
@@ -58,7 +75,7 @@ const findLinked = ({ componentProperties, componentId, blockProperties }) => {
 }
 
 // 重置组件属性的关联信息
-const resetLink = (properties) => {
+const resetLink = (properties: Property[]) => {
   if (properties && Array.isArray(properties)) {
     properties.forEach((group) => {
       if (group?.content && Array.isArray(group.content)) {
@@ -70,16 +87,16 @@ const resetLink = (properties) => {
   }
 }
 
-const getProperty = ({ pageState }) => {
+const getProperty = ({ pageState }: { pageState: PageState }) => {
   const { getCurrentBlock, getBlockProperties } = useBlock()
 
   const properties = computed(() => {
     // 区块消费时区块属性有关联信息需要重置
-    resetLink(pageState.properties)
+    resetLink(pageState.properties as Property[])
     // 区块编辑态下设置组件关联信息
     if (pageState.isBlock && pageState.currentSchema?.id) {
       findLinked({
-        componentProperties: pageState.properties,
+        componentProperties: pageState.properties as Property[],
         componentId: pageState.currentSchema.id,
         blockProperties: getBlockProperties(getCurrentBlock())
       })

packages/toolbars/generate-code/src/composable/useSaveLocal.ts

@@ -19,8 +19,8 @@ const bridge = window.vscodeBridge
 
 const confirmSaveLocal = async () => {
   const { pageState, setSaved } = useCanvas()
-  const currentPageId = pageState.currentPageId || pageState.currentPage.id
-  const currentPageName = pageState.currentPageName || pageState.currentPage.name
+  const currentPageId = pageState.currentPageId || pageState.currentPage?.id
+  const currentPageName = pageState.currentPageName || pageState.currentPage?.name
 
   const { VITE_ORIGIN } = useEnv()
   const savePage = await bridge.callHandler('save-page', {
@@ -52,8 +52,8 @@ const savePageLocal = async () => {
   // 查询本地页面文件是否存在
   const { currentPageId, currentPageName, currentPage } = useCanvas().pageState
   const fileExistRes = await bridge.callHandler('page-is-exist', {
-    pageName: currentPageName || currentPage.name,
-    pageId: currentPageId || currentPage.id,
+    pageName: currentPageName || currentPage?.name,
+    pageId: currentPageId || currentPage?.id,
     platformId: getMergeMeta('engine.config')?.platformId
   })