业务篇-简历制作之常用组件设计与简历数据设计 #

<MyButton size="middle" onClick={() => console.log('点击按钮')}>
  导出PDF
</MyButton>

<MyInput
  value={base.username}
  placeholder="请输入姓名" // 占位文本
  allowClear={true} // 是否显示清除icon
  onChange={(e) => console.log(e.target.value)}
/>

<MyInput
  value={hobby || ''}
  placeholder="你有什么特长爱好呢" // 占位文本
  allowClear={true} // 是否显示清除icon
  onChange={(e) => console.log(e.target.value)}
  type="textarea" // 类型为多行文本
  rows={5} // 输入文本的行数
  maxLength={200} // 最多支持的文本长度
  allowCount={true} // 是否显示底部文本字数
/>

class FileEvent {
  public constructor(file: any) {
    this.file = file;
    this.uuid = createUID();
    const types = file?.type?.split('/') || [];
    this.fileType = types.length ? types[0] : '';
    this.base64URL = window.URL.createObjectURL(file); // 本地预览地址
  }

  // 释放创建过的URL，不然会存在性能问题
  // 详情可见 : https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
  public revokeFileBase64URL(base64URL: string) {
    window.URL.revokeObjectURL(base64URL);
  }

  // 上传/取消上传/重试
  public upload() {}
  public cancel() {}
  public retry() {}
}

export default FileEvent;

/**
 * @description 所有弹窗组件集合
 * 方式一：
 * import MyModal from '@components/MyModal';
 * <MyModal.Confirm />
 *
 * 方式二：
 * import { Confirm } from '@components/MyModal';
 * <Confirm />
 */
import MyDialog from './MyDialog';
import MyConfirm from './MyConfirm';

export const Dialog = MyDialog;
export const Confirm = MyConfirm;

export default {
  Dialog: MyDialog,
  Confirm: MyConfirm,
};

<MyModal.Confirm
  title="确定要打印简历吗？"
  description="请确保信息的正确，目前仅支持单页打印哦～"
  config={{
    cancelBtn: {
      isShow: true,
      callback: () => {},
    },
    submitBtn: {
      isShow: true,
      callback: () => toPrintPdf('彭道宽+前端工程师'),
    },
  }}
/>

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

function Resume() {
  const HEADER_HEIGHT = 60;
  const height = document.body.clientHeight;

  return (
    <div styleName="container">
      <MyScrollBox maxHeight={height - HEADER_HEIGHT}>
        <Template.TemplateOne />
      </MyScrollBox>
    </div>
  );
}

// app/renderer/store/index.ts
// 👇 引入我们写好的 model
import globalModel from './globalModel';
import resumeModel from './resumeModel';

// 👇 这里只需要调用 RcReduxModel 实例化一下得到最后的 reduxModel
const reduxModel = new RcReduxModel([globalModel, resumeModel]);

// 👇 无侵入式的使用 Redux，即使你写最原始的 reducer 也照样支持
const reducerList = combineReducers(reduxModel.reducers);

export default createStore(reducerList, applyMiddleware(reduxModel.thunk, logger));

// app/renderer/store/resumeModel.ts
const resumeModel: TSRcReduxModel.Props<TSResume.IntactResume> = {
  namespace: 'resumeModel',
  openSeamlessImmutable: true,
  state: {
    // 简历信息字段
  },
};

export default resumeModel;

const userResume = {
  base: {
    avatar: '',
    username: '彭道宽',
    area: '海南·海口',
    school: '湖南瞎说大学',
    major: '软件工程',
    degree: '本科',
    hometown: '汉族',
    onSchoolTime: {
      beginTime: '2015.09',
      endTime: '2019.06',
    },
  },
  contact: {
    phone: '176****2612',
    email: '1063137960@qq.com',
    github: 'https://github.com/PDKSophia',
    juejin: 'https://juejin.cn/user/1838039171075352',
  },
  work: {
    job: '前端工程师',
    city: '广州｜成都｜海口',
    cityList: ['广州', '成都', '海口'],
  },
  hobby: '篮球、爬山、健身、吉他、街舞',
  skill: '熟悉 Vue.js，了解数据双向绑定原理、阅读过 NextTick 源码｜熟悉 React，了解并使用 Hooks 特性，阅读过 redux 源码，开发 rc-redux-model 中间件｜阅读过 Antd 部分优秀组件源码，并参考借鉴，开发组内 UI 组件库｜了解 Vscode，开发组内项目辅助工具 vscode-beehive-extension 插件｜了解 Webpack 编译原理，了解 babel 转码原理，编写过 babel 插件｜了解 Electron，了解 Node.js 以及 Git 团队协作开发工具｜了解设计模式，对于特定场景，能采用合适的设计模式进行解决｜了解 MYSQL，了解数据库优化常用方法｜了解基于微信公众号应用开发，采用 Taro 开发微信小程序，具备良好的网络基础知识',
  skillList: [
    '熟悉 Vue.js，了解数据双向绑定原理、阅读过 NextTick 源码',
    '熟悉 React，了解并使用 Hooks 特性，阅读过 redux 源码，开发 rc-redux-model 中间件',
    '阅读过 Antd 部分优秀组件源码，并参考借鉴，开发组内 UI 组件库',
    '了解 Vscode，开发组内项目辅助工具 vscode-beehive-extension 插件',
    '了解 Webpack 编译原理，了解 babel 转码原理，编写过 babel 插件',
    '了解 Electron，了解 Node.js 以及 Git 团队协作开发工具',
    '了解设计模式，对于特定场景，能采用合适的设计模式进行解决',
    '了解 MYSQL，了解数据库优化常用方法',
    '了解基于微信公众号应用开发，采用 Taro 开发微信小程序，具备良好的网络基础知识',
  ],
  evaluation: '投身开源，rc-redux-model 库作者，SugarTurboS Club 开源组织负责人| 掘金 lv3 博主，掘金文章 10w+ 阅读量，github blog 300+ star | 具备良好语言表达能力和沟通能力，能快速融入团队，适应新环境|具有代码洁癖，前后端分离，自我学习能力强，对新技术具有钻研精神',
  evaluationList: [
    '投身开源，rc-redux-model 库作者，SugarTurboS Club 开源组织负责人',
    '掘金 lv3 博主，掘金文章 10w+ 阅读量，github blog 300+ star',
    '具备良好语言表达能力和沟通能力，能快速融入团队，适应新环境。',
    '具有代码洁癖，前后端分离，自我学习能力强，对新技术具有钻研精神',
  ],
  certificate: '广州第一届喝酒大赛参与奖',
  certificateList: ['广州第一届喝酒大赛参与奖'],
  schoolExperience: [
    {
      beginTime: '2016.09',
      endTime: '2017.09',
      post: '文艺部会长',
      department: '校团委学生会',
      content: '计划、组织、协调各年级学生组织的文艺和文化娱乐活动｜承办好学生会部的学生文艺晚会。有效地与社团部开展合作项目',
      parseContent: [
        '计划、组织、协调各年级学生组织的文艺和文化娱乐活动',
        '承办好学生会部的学生文艺晚会。有效地与社团部开展合作项目',
      ],
    },
  ],
  workExperience: [
    {
      beginTime: 1504195200000,
      endTime: 1559318400000,
      post: '前端工程师',
      department: '湖南瞎说大学网络中心',
      content: '担任TickNet工作室前端工程师，与湖南瞎说大学网络中心合作，围绕微信企业号开发或主导多个应用｜任职期间基于微信企业号开发校内闲余市场，采用Vue.js主导开发，并与湖南xxx科技有限公司合作，主导开发该公司官网及后台管理',
      parseContent: [
        '担任TickNet工作室前端工程师，与湖南瞎说大学网络中心合作，围绕微信企业号开发或主导多个应用',
        '任职期间基于微信企业号开发校内闲余市场，采用Vue.js主导开发，并与湖南xxx科技有限公司合作，主导开发该公司官网及后台管理',
      ],
    },
  ],
  projectExperience: [
    {
      beginTime: '2021.03',
      endTime: '2021.05',
      projectName: 'visResumeMook 可视化简历平台',
      post: '前端工程师',
      content:
        'Electron + React Hooks 打造简历平台，只需输入一次信息，套用多份模版｜通过 jsonfile 方式实现主题换肤，支持导出 PDF 简历文档｜通过 indexDB 方式实现历史简历缓存，通过可视化拖拽形式，自定义组件模版',
      parseContent: [
        'Electron + React Hooks 打造简历平台，只需输入一次信息，套用多份模版',
        '通过 jsonfile 方式实现主题换肤，支持导出 PDF 简历文档',
        '通过 indexDB 方式实现历史简历缓存，通过可视化拖拽形式，自定义组件模版',
      ],
      date: 1621145137865,
    },
  ],
};