Merge branch 'main' of https://github.com/Hacker233/resume-design

README.md

@@ -192,6 +192,13 @@ pnpm build
             <sub style="font-size:14px"><b>张雨凡</b></sub>
         </a>
     </td>
+    <td align="center" style="word-wrap: break-word; width: 75.0; height: 75.0">
+        <a href=https://github.com/Ocean-H1>
+            <img src=https://avatars.githubusercontent.com/u/74898523?v=4 width="50;"  style="border-radius:50%;align-items:center;justify-content:center;overflow:hidden;padding-top:10px" alt=OceanH/>
+            <br />
+            <sub style="font-size:14px"><b>OceanH</b></sub>
+        </a>
+    </td>
     <td align="center" style="word-wrap: break-word; width: 75.0; height: 75.0">
         <a href=https://github.com/daluozha>
             <img src=https://avatars.githubusercontent.com/u/35727398?v=4 width="50;"  style="border-radius:50%;align-items:center;justify-content:center;overflow:hidden;padding-top:10px" alt=- luozha -/>

src/template/custom/ModelBox.vue

@@ -2,7 +2,10 @@
   <div
     v-if="item.show"
     :ref="(el) => setRefItem(el, item.keyId)"
-    class="material-model-box"
+    :class="[
+      'material-model-box',
+      { 'is-have-border': item.keyId === appStore.useSelectMaterialStore.cptKeyId }
+    ]"
     @click="selectModel"
     @mouseover="handleMouseover"
     @mouseleave="handleMouseleave"
@@ -52,15 +55,10 @@
   const { cptKeyId } = storeToRefs(appStore.useSelectMaterialStore);
   watch(
     () => cptKeyId.value,
-    (newVal, oldVal) => {
-      // 判断是否选中复选框
-      if (oldVal && modelObj[oldVal]) {
-        modelObj[oldVal].el.style.borderColor = 'transparent';
-      }
+    (newVal) => {
       // 如果选中了模块
       if (newVal && modelObj[newVal]) {
         modelObj[newVal].el.scrollIntoView({ behavior: 'smooth', block: 'center' }); // 该模块显示在可视区域内
-        modelObj[newVal].el.style.borderColor = '#7ec97e';
       }
     },
     {
@@ -189,4 +187,7 @@
       }
     }
   }
+  .is-have-border {
+    border-color: #7ec97e;
+  }
 </style>

src/views/custom/components/ModelBox.vue

@@ -18,7 +18,7 @@
         </div>
       </el-tooltip>
       <el-tooltip class="box-item" effect="dark" content="删除当前模块">
-        <div class="delete" @click.stop="useDeleteModel(item)">
+        <div class="delete" @click.stop="delModel">
           <svg-icon
             icon-name="icon-shanchu"
             class-name="icon icon-shanchu"
@@ -114,7 +114,7 @@
     }
   };
 
-  // 传统布局删除
+  // 传统布局添加
   const classicalAdd = () => {
     let index: number = resumeJsonNewStore.value.COMPONENTS.findIndex(
       (item) => item.keyId === props.item.keyId
@@ -123,6 +123,19 @@
     insert.keyId = getUuid();
     resumeJsonNewStore.value.COMPONENTS.splice(index, 0, insert);
   };
+
+  // 删除当前模块
+  const delModel = () => {
+    if (resumeJsonNewStore.value.LAYOUT === 'classical') {
+      classicalDelete();
+    } else {
+      emit('leftRightDelete', props.item);
+    }
+  };
+  // 传统布局删除模块
+  const classicalDelete = () => {
+    useDeleteModel(props.item);
+  };
 </script>
 <style lang="scss" scoped>
   .material-model-box {