feature(createTemplate): 新增模版

Hacker233 · Dec 18, 2024 · dd651d5 · dd651d5
1 parent cd674b0
commit dd651d5
Show file tree

Hide file tree

Showing 23 changed files with 359 additions and 14 deletions.
diff --git a/src/assets/images/moduleTitle/ModuleTitle_15.png b/src/assets/images/moduleTitle/ModuleTitle_15.png
diff --git a/src/assets/images/moduleTitle/ModuleTitle_16.png b/src/assets/images/moduleTitle/ModuleTitle_16.png
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -1062,7 +1062,15 @@ const routes: Array<RouteRecordRaw> = [
 // const routerHistory = createWebHistory('/');
 const router = createRouter({
   history: createWebHistory(),
-  routes
+  routes,
+  scrollBehavior(to, from, savedPosition) {
+    // 如果有保存的滚动位置，则滚动到该位置
+    if (savedPosition) {
+      return savedPosition;
+    }
+    // 跳转到新的页面时，滚动到顶部
+    return { top: 0 };
+  }
 });
 
 // 全局守卫：登录拦截 本地没有存token,请重新登录

diff --git a/src/views/createTemplate/designer/components/ModuleSelect.vue b/src/views/createTemplate/designer/components/ModuleSelect.vue
@@ -52,7 +52,9 @@
                     lazy
                   />
                   <!-- 组件的name -->
-                  <span class="module-component-name">{{ element.componentName }}</span>
+                  <span v-if="showModuleName" class="module-component-name">{{
+                    element.componentName
+                  }}</span>
                 </div>
               </template>
             </draggable>
@@ -85,9 +87,11 @@
 
   interface IModuleSelect {
     showTitle?: boolean;
+    showModuleName?: boolean;
   }
   withDefaults(defineProps<IModuleSelect>(), {
-    showTitle: true
+    showTitle: true,
+    showModuleName: true
   });
 
   const { selectedModuleListId } = storeToRefs(appStore.useCreateTemplateStore);

diff --git a/src/views/createTemplate/designer/components/ModuleStyleSettingDrawer.vue b/src/views/createTemplate/designer/components/ModuleStyleSettingDrawer.vue
@@ -27,7 +27,7 @@
         </el-form>
       </el-collapse-item>
       <!-- 自定义的样式属性 -->
-      <div class="collapse-line-bolck">
+      <div v-if="module?.customCss?.length" class="collapse-line-bolck">
         <h1>内部子组件样式属性设置</h1>
       </div>
       <el-collapse-item

diff --git a/src/views/createTemplate/designer/components/SelectModuleTitleDialog.vue b/src/views/createTemplate/designer/components/SelectModuleTitleDialog.vue
@@ -2,7 +2,7 @@
 <template>
   <el-dialog
     :model-value="dialogModuleTitleVisible"
-    title="请选择模块标题组件"
+    title="请选择模块标题样式"
     width="800px"
     :show-close="false"
     :close-on-click-modal="false"
@@ -20,7 +20,9 @@
         </div>
         <img :src="getModuleTitleImagesFile(item.img)" alt="图片" lazy @click="selectPage(item)" />
         <!-- 组件的name -->
-        <span class="module-title-component-name">{{ item.cptName }}</span>
+        <span v-if="showModuleTitleName" class="module-title-component-name">{{
+          item.cptName
+        }}</span>
       </div>
     </div>
     <template #footer>
@@ -44,9 +46,11 @@
   const emit = defineEmits(['cancle', 'updateSuccess']);
   interface TDialog {
     dialogModuleTitleVisible: boolean;
+    showModuleTitleName?: boolean;
   }
   const props = withDefaults(defineProps<TDialog>(), {
-    dialogModuleTitleVisible: false
+    dialogModuleTitleVisible: false,
+    showModuleTitleName: true
   });
 
   const { selectedModuleId } = storeToRefs(appStore.useCreateTemplateStore);

diff --git a/src/views/createTemplate/designer/dicts/themeColorProps.ts b/src/views/createTemplate/designer/dicts/themeColorProps.ts
@@ -8,6 +8,10 @@ const themeColorProps: any = {
     css: ['background'],
     customCss: {}
   },
+  ResumeTitle_3: {
+    css: ['background'], // 主题样式需要设置为主题色的css属性
+    customCss: {} // 自定义样式中，需要设置为主题色的prop，以及对应的css属性
+  },
   BaseInfo_3: {
     css: [],
     customCss: {}
@@ -601,6 +605,12 @@ export const moduleTitleThemeProps: any = {
   },
   ModuleTitle_14: {
     moduleTitle: ['borderColor', 'color']
+  },
+  ModuleTitle_15: {
+    moduleTitleFont: ['background']
+  },
+  ModuleTitle_16: {
+    moduleTitleFont: ['background', 'backgroundColor']
   }
 };
 export default themeColorProps;
diff --git a/src/views/createTemplate/designer/modules/ModuleTitle/ModuleTitle_15.vue b/src/views/createTemplate/designer/modules/ModuleTitle/ModuleTitle_15.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="module-title-15" :style="moduleTitleStyle">
+    <hj-h1-1 :title="module.title" :style="moduleTitleFontStyle"></hj-h1-1>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { IModule } from '@/views/createTemplate/types/IHJNewSchema';
+  import HjH11 from '../components/hj-h1-1.vue';
+  import { useGetCustomStyle } from '../../hooks/useGetCustomStyle';
+
+  const props = defineProps<{
+    module: IModule;
+  }>();
+
+  // 返回模块整体样式
+  const moduleTitleStyle: any = useGetCustomStyle(props.module, 'moduleTitle');
+  // 返回标题字体样式
+  const moduleTitleFontStyle = useGetCustomStyle(props.module, 'moduleTitleFont');
+</script>
diff --git a/src/views/createTemplate/designer/modules/ModuleTitle/ModuleTitle_16.vue b/src/views/createTemplate/designer/modules/ModuleTitle/ModuleTitle_16.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="module-title-16" :style="moduleTitleStyle">
+    <hj-h1-1
+      class="module-title-h1-16"
+      :title="module.title"
+      :style="moduleTitleFontStyle"
+    ></hj-h1-1>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { IModule } from '@/views/createTemplate/types/IHJNewSchema';
+  import HjH11 from '../components/hj-h1-1.vue';
+  import { useGetCustomStyle } from '../../hooks/useGetCustomStyle';
+
+  const props = defineProps<{
+    module: IModule;
+  }>();
+
+  // 返回模块整体样式
+  const moduleTitleStyle: any = useGetCustomStyle(props.module, 'moduleTitle');
+  // 返回标题字体样式
+  const moduleTitleFontStyle = useGetCustomStyle(props.module, 'moduleTitleFont');
+</script>
+<style lang="scss" scoped>
+  .module-title-h1-16 {
+    &::before {
+      content: '';
+      position: absolute;
+      left: 11px;
+      display: inline-block;
+      width: 4px;
+      height: 100%;
+      background-color: #fff;
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      left: 26px;
+      display: inline-block;
+      width: 4px;
+      height: 100%;
+      background-color: #fff;
+    }
+  }
+</style>
diff --git a/src/views/createTemplate/designer/modules/ModuleTitle/index.ts b/src/views/createTemplate/designer/modules/ModuleTitle/index.ts
@@ -12,6 +12,8 @@ import ModuleTitle_11 from './ModuleTitle_11.vue';
 import ModuleTitle_12 from './ModuleTitle_12.vue';
 import ModuleTitle_13 from './ModuleTitle_13.vue';
 import ModuleTitle_14 from './ModuleTitle_14.vue';
+import ModuleTitle_15 from './ModuleTitle_15.vue';
+import ModuleTitle_16 from './ModuleTitle_16.vue';
 
 const ModuleTitleCpt: any = {
   ModuleTitle_1,
@@ -27,7 +29,9 @@ const ModuleTitleCpt: any = {
   ModuleTitle_11,
   ModuleTitle_12,
   ModuleTitle_13,
-  ModuleTitle_14
+  ModuleTitle_14,
+  ModuleTitle_15,
+  ModuleTitle_16
 };
 
 // 模块标题对应快照
@@ -101,6 +105,16 @@ export const ModuleTitleScreenShotList = [
     cptName: 'ModuleTitle_14',
     img: 'ModuleTitle_14.png',
     iconfont: false
+  },
+  {
+    cptName: 'ModuleTitle_15',
+    img: 'ModuleTitle_15.png',
+    iconfont: false
+  },
+  {
+    cptName: 'ModuleTitle_16',
+    img: 'ModuleTitle_16.png',
+    iconfont: false
   }
 ];
 

diff --git a/src/views/createTemplate/designer/modules/ResumeTitle/ResumeTitle_3.vue b/src/views/createTemplate/designer/modules/ResumeTitle/ResumeTitle_3.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="resume-title-box" :style="boxStyle">
+    <div v-show="module.props.title" class="content-box">
+      <hj-p-1 :p="module.dataSource.title.value"></hj-p-1>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { IModule } from '@/views/createTemplate/types/IHJNewSchema';
+  import { useGetBoxStyle } from '../../hooks/useGetStyle';
+  import HjP1 from '../components/hj-p-1.vue';
+  const props = defineProps<{
+    module: IModule;
+  }>();
+  // 返回样式
+  const boxStyle = useGetBoxStyle(props);
+</script>
+<style lang="scss" scoped>
+  .resume-title-box {
+    .content-box {
+      display: flex;
+      height: 100%;
+      align-items: center;
+    }
+  }
+</style>
diff --git a/src/views/createTemplate/designer/schema/customCss/index.ts b/src/views/createTemplate/designer/schema/customCss/index.ts
@@ -24,6 +24,7 @@ import JobIntention_10 from './job_intention/JobIntention_10';
 
 import ResumeTitle_1 from './resume_title/ResumeTitle_1';
 import ResumeTitle_2 from './resume_title/ResumeTitle_2';
+import ResumeTitle_3 from './resume_title/ResumeTitle_3';
 
 // 教育背景
 import EduBackground_1 from './edu_background/EduBackground_1';
@@ -179,6 +180,8 @@ import ModuleTitle_11 from './module_title/Module_Title_11';
 import ModuleTitle_12 from './module_title/Module_Title_12';
 import ModuleTitle_13 from './module_title/Module_Title_13';
 import ModuleTitle_14 from './module_title/Module_Title_14';
+import ModuleTitle_15 from './module_title/Module_Title_15';
+import ModuleTitle_16 from './module_title/Module_Title_16';
 
 // 页面
 import base_page from './pages/base_page';
@@ -211,6 +214,7 @@ const customCss: any = {
 
   ResumeTitle_1,
   ResumeTitle_2,
+  ResumeTitle_3,
 
   EduBackground_1,
   EduBackground_2,
@@ -354,6 +358,8 @@ const customCss: any = {
   ModuleTitle_12,
   ModuleTitle_13,
   ModuleTitle_14,
+  ModuleTitle_15,
+  ModuleTitle_16,
 
   base_page,
   left_right_page,

diff --git a/src/views/createTemplate/designer/schema/customCss/module_title/Module_Title_15.ts b/src/views/createTemplate/designer/schema/customCss/module_title/Module_Title_15.ts
@@ -0,0 +1,59 @@
+export default [
+  {
+    title: '模块标题整体样式',
+    prop: 'moduleTitle',
+    css: {
+      height: '32px',
+      width: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      borderWidth: {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+      },
+      margin: {
+        top: 0,
+        right: 0,
+        bottom: 15,
+        left: 0
+      },
+      padding: {
+        top: 0,
+        right: -1,
+        bottom: 0,
+        left: 0
+      },
+      borderStyle: 'solid',
+      background: '#f3f3f3',
+      borderColor: '#5974D4',
+      color: 'rgb(255, 255, 255)'
+    }
+  },
+  {
+    title: '模块标题字体样式',
+    prop: 'moduleTitleFont',
+    css: {
+      height: '100%',
+      width: '130px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: 20,
+      fontWeight: 600,
+      letterSpacing: 2,
+      background: '#5974D4',
+      color: '#fff',
+      borderWidth: {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+      },
+      borderColor: 'rgb(0, 0, 0)',
+      borderStyle: 'solid'
+    }
+  }
+];
diff --git a/src/views/createTemplate/designer/schema/customCss/module_title/Module_Title_16.ts b/src/views/createTemplate/designer/schema/customCss/module_title/Module_Title_16.ts
@@ -0,0 +1,65 @@
+export default [
+  {
+    title: '模块标题整体样式',
+    prop: 'moduleTitle',
+    css: {
+      height: '32px',
+      width: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      borderWidth: {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+      },
+      margin: {
+        top: 0,
+        right: 0,
+        bottom: 15,
+        left: 0
+      },
+      padding: {
+        top: 0,
+        right: -1,
+        bottom: 0,
+        left: 0
+      },
+      borderStyle: 'solid',
+      background: '#f3f3f3',
+      borderColor: '#5974D4',
+      color: 'rgb(255, 255, 255)'
+    }
+  },
+  {
+    title: '模块标题字体样式',
+    prop: 'moduleTitleFont',
+    css: {
+      height: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      fontSize: 20,
+      fontWeight: 600,
+      letterSpacing: 2,
+      background: '#5974D4',
+      color: '#fff',
+      position: 'relative',
+      borderWidth: {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+      },
+      padding: {
+        top: 0,
+        right: 20,
+        bottom: 0,
+        left: 50
+      },
+      borderColor: 'rgb(0, 0, 0)',
+      borderStyle: 'solid'
+    }
+  }
+];
diff --git a/src/views/createTemplate/designer/schema/customCss/resume_title/ResumeTitle_3.ts b/src/views/createTemplate/designer/schema/customCss/resume_title/ResumeTitle_3.ts
@@ -0,0 +1 @@
+export default [];