feature(template): 新增在线制作物料

src/config/index.ts

@@ -6,7 +6,3 @@ const CONFIG = {
   smallpigAddress: 'https://smallpig.site'
 };
 export default CONFIG;
-
-// /www/wwwroot/huajian.smallpig.site/resume-server/resume-server/node_modules/_puppeteer@17.1.3@puppeteer/.local-chromium/linux-1036745/chrome-linux/chrome: error while loading shared libraries: libnss3.so: cannot open shared object file: No such file or directory
-// /www/wwwroot/huajian.smallpig.site/resume-server/resume-server/node_modules/_puppeteer@17.1.3@puppeteer/.local-chromium/linux-1036745/chrome-linux/chrome: error while loading shared libraries: libdrm.so.2: cannot open shared object file: No such file or directory
-// yum install mesa-libgbm

src/interface/model.ts

@@ -266,6 +266,19 @@ interface ICUSTOM2 {
   [propNams: string]: any;
 }
 
+// 自定义任意模块3
+interface ICUSTOM3 {
+  iconfont: string;
+  model: string;
+  show: boolean;
+  title: string;
+  name: string;
+  abstract: string;
+  avatar: string;
+  avatarShape: string;
+  [propNams: string]: any;
+}
+
 // 全局样式主题
 interface IGlobalStyle {
   themeColor: string; // 主题色
@@ -342,5 +355,6 @@ export {
   TModelList,
   IGlobalStyle,
   ICUSTOM1,
-  ICUSTOM2
+  ICUSTOM2,
+  ICUSTOM3
 };

src/material/Custom/Custom3/NameAbstractAvatar.vue

@@ -0,0 +1,56 @@
+<!-- 姓名与简介 -->
+<template>
+  <div v-if="modelData" class="name-introduce">
+    <div v-show="isShow.avatar" class="avatar-shape-box">
+      <component :is="avatarComponents[modelData.avatarShape]" :model-data="modelData"></component>
+    </div>
+    <h1>{{ modelData.name }}</h1>
+    <p v-show="isShow.abstract" v-dompurify-html="modelData.abstract"></p>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ICUSTOM3 } from '@/interface/model';
+  import IMODELSTYLE from '@/interface/modelStyle';
+  import avatarComponents from '@/utils/registerAvatarCom';
+  const props = defineProps<{
+    modelData: ICUSTOM3;
+    modelStyle: IMODELSTYLE; // 模块样式
+  }>();
+  const isShow = reactive(props.modelData.isShow);
+</script>
+<style lang="scss" scoped>
+  .name-introduce {
+    width: 100%;
+    cursor: pointer;
+    padding-top: v-bind('modelStyle.pTop');
+    padding-bottom: v-bind('modelStyle.pBottom');
+    padding-left: v-bind('modelStyle.pLeftRight');
+    padding-right: v-bind('modelStyle.pLeftRight');
+    box-sizing: border-box;
+    margin-bottom: v-bind('modelStyle.mBottom');
+    margin-top: v-bind('modelStyle.mTop');
+    background-color: v-bind('modelStyle.themeColor');
+    clip-path: ellipse(110% 100% at 50% 0%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    .avatar-shape-box {
+      margin-bottom: 25px;
+    }
+    h1 {
+      height: 30px;
+      line-height: 29px;
+      font-size: v-bind('modelStyle.titleFontSize');
+      color: v-bind('modelStyle.titleColor');
+      font-weight: v-bind('modelStyle.titleFontWeight');
+      margin: 0 0 25px 0;
+    }
+    p {
+      font-size: v-bind('modelStyle.textFontSize');
+      color: v-bind('modelStyle.textColor');
+      font-weight: v-bind('modelStyle.textFontWeight');
+      text-align: center;
+    }
+  }
+</style>

src/schema/materialList.ts

@@ -4001,30 +4001,30 @@ export const MATERIAL_JSON: IMSTERIALLISTJSON = {
     },
     {
       keyId: '', // 组件id
-      model: 'CUSTOM_2', // 模块
-      cptName: 'CUSTOM_2', // 组件名
+      model: 'CUSTOM_3', // 模块
+      cptName: 'CUSTOM_3', // 组件名
       cptOptionsName: 'CUSTOM_OPTIONS_2',
-      cptTitle: '简历标题', // 组件名
+      cptTitle: '姓名简介', // 组件名
       cptX: 0, // 组件x坐标
       cptY: 0, // 组件y坐标
       cptZ: 0, // 组件z坐标
       cptHeight: '50px', // 组件高度
       cptWidth: '100%', // 组件宽度
-      layout: 'center', // 布局在左侧还是右侧
+      layout: 'left', // 布局在左侧还是右侧
       show: true, // 组件是否显示
       style: {
-        titleColor: '#254665',
-        titleFontSize: '45px',
+        titleColor: '#FFFFFF',
+        titleFontSize: '30px',
         textFontSize: '16px',
-        titleFontWeight: 500,
+        titleFontWeight: 600,
         textFontWeight: 500,
-        textColor: '#254665',
+        textColor: '#ffffff',
         mBottom: '0px',
         mTop: '0',
-        themeColor: '#254665',
+        themeColor: '#d4ba38',
         firstTitleFontSize: '45px',
         pTop: '40px',
-        pBottom: '40px',
+        pBottom: '80px',
         pLeftRight: '30px'
       }, // 组件样式
       data: {} // 组件数据

src/schema/modelData.ts

@@ -285,6 +285,21 @@ const MODEL_DATA_JSON: IMODELDATAJSON = {
       abstract: true,
       name: true
     }
+  },
+  CUSTOM_3: {
+    iconfont: 'icon-jibenziliao',
+    model: 'CUSTOM_3',
+    show: true,
+    title: '姓名简介',
+    name: '化简',
+    abstract: '给我一个机会，我必全力以赴！',
+    avatarShape: 'CIRCLE_AVATAR', // 头像形状
+    avatar: 'https://smallpig.site:9000/resume/avatar/file-1663290281512.jpg', // 头像地址
+    isShow: {
+      abstract: true,
+      name: true,
+      avatar: true
+    }
   }
 };
 export default MODEL_DATA_JSON;

src/utils/registerMaterialCom.ts

@@ -3,6 +3,7 @@ import RESUME_TITLE_2 from '@/material/ResumeTitle/ResumeTitle2/index.vue';
 
 import CUSTOM_1 from '@/material/Custom/Custom1/NameAbstract.vue';
 import CUSTOM_2 from '@/material/Custom/Custom2/ResumeTitleWord.vue';
+import CUSTOM_3 from '@/material/Custom/Custom3/NameAbstractAvatar.vue';
 
 import EDU_BACKGROUND_1 from '@/material/EduBackground/EduBackground1/index.vue';
 import EDU_BACKGROUND_2 from '@/material/EduBackground/EduBackground2/EduBackground.vue';
@@ -146,6 +147,7 @@ import WORKS_DISPLAY_10 from '@/material/WorksDisplay/WorksDisplay10/WorksDispla
 const MaterialComponents = {
   CUSTOM_1: CUSTOM_1,
   CUSTOM_2: CUSTOM_2,
+  CUSTOM_3: CUSTOM_3,
 
   EDU_BACKGROUND_1: EDU_BACKGROUND_1,
   EDU_BACKGROUND_2: EDU_BACKGROUND_2,