7. 简历制作模块

// app/renderer/container/resume/ResumeAction/index.tsx

import React from 'react';

import './index.less';

function ResumeAction() {

  return <div>我是简历头部操作区</div>;

}

export default ResumeAction;

// app/renderer/container/resume/index.tsx

import React from 'react';

import './index.less';

// 👇 将组件引入

import ResumeAction from './ResumeAction';

import ResumeContent from './ResumeContent';

import ResumeToolbar from './ResumeToolbar';

function Resume() {

  return (

    <div styleName="container">

      <div styleName="header">

        <ResumeAction />

      </div>

      <div styleName="content">

        <ResumeContent />

      </div>

      <div styleName="toolbar">

        <ResumeToolbar />

      </div>

    </div>

  );

}

export default Resume;

// app/renderer/container/resume/ResumeAction/index.tsx

import React from 'react';

import './index.less';

import { useHistory } from 'react-router';

import ROUTER from '@common/constants/router';

import MyButton from '@common/components/MyButton';

function ResumeAction() {

  const history = useHistory();

  // 返回首页

  const onBack = () => history.push(ROUTER.root);

  // 导出 PDF

  const onExport = () => {};

  return (

    <div styleName="actions">

      <div styleName="back" onClick={onBack}>返回</div>

      <MyButton size="middle" className="export-btn" onClick={onExport}>导出PDF</MyButton>

    </div>

  );

}

export default ResumeAction;

// app/renderer/container/resume/ResumeContent/index.tsx

import React from 'react';

import './index.less';

// 👇 引入简历模版

import * as UseTemplateList from './UseTemplate';

import MyScrollBox from '@common/components/MyScrollBox';

function ResumeContent() {

  const HEADER_ACTION_HEIGHT = 92;

  const height = document.body.clientHeight;

  return (

    <MyScrollBox maxHeight={height - HEADER_ACTION_HEIGHT}>

      <UseTemplateList.TemplateOne />

    </MyScrollBox>

  );

}

export default ResumeContent;

// app/renderer/common/constants/resume.ts

export const RESUME_TOOLBAR_MAPS = {

  personal: 'personal', // 个人信息

  contact: 'contact', // 联系方式

  education: 'education', // 教育信息

  workPrefer: 'workPrefer', // 工作期望

  schoolExperience: 'schoolExperience', // 在校经历

  projectExperience: 'projectExperience', // 项目经验

  workExperience: 'workExperience', // 工作经历

  certificate: 'certificate', // 获奖证书

  evaluation: 'evaluation', // 个人评价

  skill: 'skill', // 技能清单

  test: 'test', // 测试用例

};

const RESUME_TOOLBAR_LIST: TSResume.SliderItem[] = [

  {

    key: RESUME_TOOLBAR_MAPS.personal,

    name: '个人信息',

    summary: '更好介绍自己，机会会更多',

  },

  {

    key: RESUME_TOOLBAR_MAPS.education,

    name: '教育信息',

    summary: '介绍你的学校和专业信息',

  },

  {

    key: RESUME_TOOLBAR_MAPS.contact,

    name: '联系方式',

    summary: '少侠，请留下你的联系方式',

  },

  {

    key: RESUME_TOOLBAR_MAPS.workPrefer,

    name: '工作期望',

    summary: '聊聊你所期望的宜人办公城市',

  },

  {

    key: RESUME_TOOLBAR_MAPS.schoolExperience,

    name: '在校经历',

    summary: '展示在校任职成果和人际关系',

  },

  {

    key: RESUME_TOOLBAR_MAPS.projectExperience,

    name: '项目经验',

    summary: '展示研究过什么优秀项目和成果',

  },

  {

    key: RESUME_TOOLBAR_MAPS.workExperience,

    name: '工作经历',

    summary: '申请岗位的相关经验和能力',

  },

  {

    key: RESUME_TOOLBAR_MAPS.certificate,

    name: '获奖证书',

    summary: '得过什么奖项值得炫耀',

  },

  {

    key: RESUME_TOOLBAR_MAPS.evaluation,

    name: '个人评价',

    summary: '低调夸一夸自己有什么亮点',

  },

  {

    key: RESUME_TOOLBAR_MAPS.skill,

    name: '技能清单',

    summary: '展示具备的技能，突出你的能力',

  },

  {

    key: RESUME_TOOLBAR_MAPS.test,

    name: '测试用例',

    summary: '测试用例，一键覆盖',

  },

];

/**

 * @description 编辑简历 - 工具条模块

 */

 import React from 'react';

 import './index.less';

 import MyScrollBox from '@common/components/MyScrollBox';

 import RESUME_TOOLBAR_LIST from '@common/constants/resume';

 function ResumeToolbar() {

   const height = document.body.clientHeight;

   return (

     <div styleName="slider">

       <MyScrollBox maxHeight={height - 180}>

         <div styleName="module">

           <div styleName="title">

             <span styleName="line" />

             全部模块

           </div>

           <div styleName="content">

             {RESUME_TOOLBAR_LIST.map((toolbar: TSResume.SliderItem) => {

               return (

                 <div styleName="box" key={toolbar.key}>

                   <div styleName="info">

                     <i styleName="icon" />

                     <div styleName="text">

                       <div styleName="name">{toolbar.name}</div>

                       <div styleName="summary">{toolbar.summary}</div>

                     </div>

                   </div>

                 </div>

               );

             })}

           </div>

         </div>

       </MyScrollBox>

     </div>

   );

 }

 export default ResumeToolbar;