移除选中组件&保存当前配置

package-lock.json

@@ -7,6 +7,7 @@
     "": {
       "version": "1.0.0",
       "dependencies": {
+        "@vicons/ionicons5": "^0.11.0",
         "animate.css": "^4.1.1",
         "axios": "^0.21.1",
         "countup.js": "^2.0.8",
@@ -955,6 +956,12 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@vicons/ionicons5": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@vicons/ionicons5/-/ionicons5-0.11.0.tgz",
+      "integrity": "sha512-4IWamqtXUsuCdlW6NQc2xyoJ+PUXGMwzSrppQbdVCYg0pjYld89jOfLOIkuTWq8o2XUa+Q1/78jzWBtXMTojNg==",
+      "license": "MIT"
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.6.0.tgz",
@@ -6086,6 +6093,11 @@
         "eslint-visitor-keys": "^2.0.0"
       }
     },
+    "@vicons/ionicons5": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@vicons/ionicons5/-/ionicons5-0.11.0.tgz",
+      "integrity": "sha512-4IWamqtXUsuCdlW6NQc2xyoJ+PUXGMwzSrppQbdVCYg0pjYld89jOfLOIkuTWq8o2XUa+Q1/78jzWBtXMTojNg=="
+    },
     "@vitejs/plugin-vue": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.6.0.tgz",

package.json

@@ -10,6 +10,7 @@
     "serve": "vite preview"
   },
   "dependencies": {
+    "@vicons/ionicons5": "^0.11.0",
     "animate.css": "^4.1.1",
     "axios": "^0.21.1",
     "countup.js": "^2.0.8",

src/components/MyComponent/MyGrid/my-grid.vue

@@ -37,7 +37,6 @@ export default defineComponent({
     watch(
       [() => props.template, () => props.columns, () => props.rows],
       async ([val]) => {
-        console.log(val)
         if (val && val.length > 0) {
           await nextTick()
           setChildrenArea()

src/hooks/useComponent.ts

 import { ref, computed } from 'vue'
 import list from '@/utils/component-list'
+import useConfig from './useConfig'
 
 export default function useComponent() {
   const showComponentModal = ref(false) // 展示组件选择框
   const curBox = ref<number | null>(null) // 当前容器下标
   const components = ref<{ [key: number]: string }>({}) // {容器下标: 组件key}
+
+  const config = useConfig() // 获取组件选择配置
+  if (config?.components) {
+    components.value = config.components
+  }
+
   const openComponentModal = (i: number) => {
     // 点击容器中的新增按钮
     curBox.value = i
     showComponentModal.value = true
   }
-  const onChangeComponent = (key: string) => {
+  const onSelectComponent = (key: string) => {
     // 选择组件后将key存入
     if (curBox.value === null) return
     components.value[curBox.value] = key
   }
+  const onCancelComponent = (i: number) => {
+    // 取消组件
+    delete components.value[i]
+  }
   const componentList = computed(() => list) // key值-组件 对照表
 
   return {
@@ -22,6 +33,7 @@ export default function useComponent() {
     componentList,
     showComponentModal,
     openComponentModal,
-    onChangeComponent,
+    onSelectComponent,
+    onCancelComponent,
   }
 }

src/hooks/useConfig.ts

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

src/hooks/useLayout.ts

 import { ref } from 'vue'
+import useConfig from './useConfig'
 
 export default function useLayout() {
   const showLayoutModal = ref(false) // 展示布局选择弹窗
@@ -8,6 +9,12 @@ export default function useLayout() {
     rows: '',
     boxNum: 0,
   })
+
+  const config = useConfig() // 获取布局配置
+  if (config?.layout) {
+    layout.value = config.layout
+  }
+
   const onChangeLayout = (key: string) => {
     // 选择某一布局后获取布局内容
     layout.value = getLayout(key)

src/main.ts

 import { createApp } from 'vue'
 import App from './App.vue'
 import MyComponent from '@/components/MyComponent'
+import { create, NIcon } from 'naive-ui'
 
-createApp(App).use(MyComponent).mount('#app')
+const naive = create({
+  components: [NIcon],
+})
+
+createApp(App).use(MyComponent).use(naive).mount('#app')

src/view/components/component-modal.vue

@@ -56,6 +56,10 @@ watch(
   () => visible.value,
   (val) => {
     emit('update:modelValue', val)
+    if (!val) {
+      curTab.value = '1'
+      curComponent.value = ''
+    }
   },
 )
 

src/view/main.vue

 <template>
   <div class="main">
-    <m-title area="title" @touch="showLayoutModal = true">静安智慧房管</m-title>
+    <m-title
+      area="title"
+      @click.prevent.stop="save"
+      @touch="showLayoutModal = true"
+      >静安智慧房管</m-title
+    >
     <m-grid
       v-if="layout.boxNum > 0"
       :template="layout.template"
@@ -24,11 +29,19 @@
           src="@/assets/images/add.png"
           @click.prevent.stop="openComponentModal(index)"
         />
+        <n-icon
+          v-show="!!components[index]"
+          class="del-btn"
+          size=".16rem"
+          @click="onCancelComponent(index)"
+        >
+          <TrashBin />
+        </n-icon>
       </div>
     </m-grid>
   </div>
   <LayoutModal v-model="showLayoutModal" @select="onChangeLayout" />
-  <ComponentModal v-model="showComponentModal" @select="onChangeComponent" />
+  <ComponentModal v-model="showComponentModal" @select="onSelectComponent" />
 </template>
 
 <script lang="ts" setup>
@@ -36,6 +49,8 @@ import LayoutModal from './components/layout-modal.vue'
 import ComponentModal from './components/component-modal.vue'
 import useLayout from '@/hooks/useLayout'
 import useComponent from '@/hooks/useComponent'
+import useConfig from '@/hooks/useConfig'
+import { TrashBin } from '@vicons/ionicons5'
 
 const { showLayoutModal, layout, onChangeLayout } = useLayout()
 const {
@@ -43,8 +58,16 @@ const {
   componentList,
   showComponentModal,
   openComponentModal,
-  onChangeComponent,
+  onCancelComponent,
+  onSelectComponent,
 } = useComponent()
+const save = () => {
+  const data = {
+    layout: layout.value,
+    components: components.value,
+  }
+  useConfig(JSON.stringify(data))
+}
 </script>
 
 <style lang="stylus" scoped>
@@ -61,6 +84,9 @@ const {
   $blur(0.01rem)
   position relative
   overflow hidden
+  &:hover
+    >.del-btn
+      opacity 0.7
   &.done
     border none
     background transparent
@@ -79,4 +105,14 @@ const {
       opacity 1
       width .24rem
       height @width
+  >.del-btn
+    position absolute
+    top .05rem
+    right .05rem
+    cursor pointer
+    color red
+    opacity 0
+    transition opacity .2s ease-in-out
+    &:hover
+      opacity 1
 </style>