调整

src/components/MyComponent/MyProgress/my-progress.vue

@@ -22,6 +22,7 @@ export interface ProgressProps {
   name?: string
   value?: number
   unit?: string
+  color?: string
 }
 export default defineComponent({
   name: 'MyProgress',

src/hooks/useComponent.ts

 import { ref, computed } from 'vue'
 import list from '@/utils/component-list'
-import useConfig from './useConfig'
+import useConfig, { Config } from './useConfig'
 
 export default function useComponent() {
   const showComponentModal = ref(false) // 展示组件选择框
   const curBox = ref<number | null>(null) // 当前容器下标
-  const components = ref<{ [key: number]: string }>({}) // {容器下标: 组件key}
+  const components = ref<Config['components']>({}) // {容器下标: 组件key}
 
   const config = useConfig() // 获取组件选择配置
   if (config?.components) {
@@ -24,7 +24,7 @@ export default function useComponent() {
   }
   const onCancelComponent = (i: number) => {
     // 取消组件
-    delete components.value[i]
+    delete components.value?.[i]
   }
   const componentList = computed(() => list) // key值-组件 对照表
 

src/hooks/useConfig.ts

-interface Config {
-  layout?: { template: string[]; rows: string; boxNum: number }
-  components?: { [key: number]: string }
+export interface Config {
+  layout: { template: string[]; rows: string; boxNum: number }
+  components: { [key: number]: string }
 }
 
 export default function useConfig(config?: string) {
@@ -11,7 +11,17 @@ export default function useConfig(config?: string) {
   }
 
   // 获取配置
-  let data = window.sessionStorage.getItem('__layout_components__')
-  data && (data = JSON.parse(data))
-  return data as Config
+  const data = window.sessionStorage.getItem('__layout_components__')
+  if (data) {
+    return JSON.parse(data) as Config
+  } else {
+    return {
+      layout: {
+        template: [],
+        rows: '',
+        boxNum: 0,
+      },
+      components: {},
+    }
+  }
 }

src/hooks/useLayout.ts

 import { ref } from 'vue'
-import useConfig from './useConfig'
+import useConfig, { Config } from './useConfig'
 
 export default function useLayout() {
   const showLayoutModal = ref(false) // 展示布局选择弹窗
-  const layout = ref<{ template: string[]; rows: string; boxNum: number }>({
+  const layout = ref<Config['layout']>({
     // 布局内容设置
     template: [],
     rows: '',