业务篇-简历制作之入口页面开发

简历制作模块

上一章节主要讲解了常用的组件设计与实现，且已在第八章的代码中添加了部分的 utils、constants、types 等，本章节我们继续基于 👉 chapter-08 代码，去开发简历制作模块的入口页面。

🧨 本章节以第八章封装的基建为主，一步步带你开发简历制作的入口页面，这是一个循序渐进的过程，所以小伙伴们一定要阅读第八章，了解基建组件和提供的静态模版、简历数据格式等。忘记的小伙伴回过头再去看看。

回顾一下现在的文件结构，在第八章节时，我们将常用的组件进行抽离封装，对类型进行了约束，添加了 templates 模版文件夹，用于存放所有模版，新增 resumeModel 定义用户简历信息的数据字段。

万事俱备，接下来正式进入到简历制作环节，话不多说，让我们动手实践吧～

简历入口实现

我们将简历制作的页面拆分为三大块，分别为头部操作区、简历内容展示区、工具条操作区，如下图

我们按照这种分层进行代码编写，在 renderer/container/resume 文件夹下新增三个文件夹，每个文件夹都追加一个入口文件 index.tsx 和 index.less 文件

// 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/ResumeContent/index.tsx
import React from 'react';
import './index.less';

function ResumeContent() {
  return <div>我是简历内容展示区</div>;
}
export default ResumeContent;

// app/renderer/container/resume/ResumeToolbar/index.tsx
import React from 'react';
import './index.less';

function ResumeToolbar() {
  return <div>我是工具条操作区</div>;
}
export default ResumeToolbar;

此刻我们去修改简历模块的入口文件 index.tsx

// 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;

加上 CSS 定位和布局，刷新页面，可以看到最终效果

看样子布局方面没什么问题了，接下来按小模块，进行代码实现

ResumeAction 操作区

在功能上，该组件只需要实现返回首页与导出PDF功能，导出功能将在第十一章解锁，这边我们只需要知道点击之后，触发导出事件即可。我们来修改 ResumeAction 中的 index.tsx

// 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;

加上我们的 CSS 样式，最后我们将操作区美化为下面效果图

ResumeContent 简历内容展示区

由于我们的简历模版需要展示且可修改内容，为此，我们在 ResumeContent 下新增一个文件夹，取名为 UseTemplate，寓意为使用的模版，此文件夹下存放着将来用于制作的简历模版。

在第八章中，我事先写好了一份静态简历模版，模版存放于：renderer/container/templates，它的目的仅用于展示，告知用户当前有哪些模版可以选择，主要职责用于预览，而非制作。为了支持模版进行制作，我们将 templates 下的文件拷贝一份，存放在 /ResumeContent/UseTemplate 下，此时的文件目录为：

接着我们去修改 ResumeContent 中的 index.tsx，将这份简历模版引入并展示

// 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;

刷新页面，看看此刻的效果图

ResumeToolbar 工具条操作区

距离简历制作的入口页面，仅差最后的 Toolbar 工具条模块了，让我们来实现一下它。

还记得第八章节中，我们对简历数据进行了划分，那么工具条模块的划分与之一一对应。

我们进入 renderer/common/constants 文件夹下，新增一个 resume.ts 常量文件，在里面定义我们工具条模块的相关信息。

// 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: '测试用例，一键覆盖',
  },
];

在 ResumeToolbar 中，我们修改 index.tsx，将工具条模块常量引入，遍历展示

// app/renderer/container/resume/ResumeToolbar/index.tsx
/**
 * @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="content">
            {RESUME_TOOLBAR_LIST.map((toolbar: TSResume.SliderItem) => {
              return (
                <div styleName="box" key={toolbar.key}>
                 // ...
                </div>
              );
            })}
          </div>
        </div>
      </MyScrollBox>
    </div>
  );
}

export default ResumeToolbar;

刷新一下页面，我们看看最终效果

至此，我们的简历制作静态页面到此完结，关于此章节代码在 👉 chapter-09

总结

本章节主要带着小伙伴们实现了简历制作页面的静态效果，我们通过将页面拆分成多个组件模块，逐步深入组件模块中去实现功能逻辑。

如果您在边阅读边实践时，发现代码报错或者 TS 报错，那么小伙伴们可以根据报错信息，去线上看看相应的代码。

如果对本章节存在疑问，欢迎在评论区留言。

业务篇-简历制作之入口页面开发 #

简历制作模块 #

简历入口实现 #

ResumeAction 操作区 #

ResumeContent 简历内容展示区 #

ResumeToolbar 工具条操作区 #

总结 #