调整打印的padding和readme

Author: xgChange

README.md

@@ -1,9 +1,18 @@
 # 这是简历编辑器
 
-这是通过 react、react-hooks、typecript、sass 搭建的简历编辑器（demo）
+这是通过 **react**、**react-hooks、redux、typecript、sass(module)** 搭建的简易版简历编辑器（demo）
 
-## `yarn install`
+## 目前实现的主要功能
 
-## `yarn start`
+- 支持通过编辑栏输入信息，预览栏可显示
+- 简单的表单验证
+- 支持 markdown 语法，在头部栏右边的设置按钮处打开
+- 支持打印和导出 pdf（预览栏右上方点击下载）
 
-## `yarn build`
+## 安装方式
+
+- `yarn install`
+
+- `yarn start`
+
+- `yarn build`

src/assets/index.scss

@@ -88,7 +88,7 @@ body,
     background-color: #ffffff;
   }
   .print-content {
-    padding: 0 40px 0 40px;
+    padding: 0 50px 0 50px;
   }
 }
 

src/components/common/container-md/index.tsx

@@ -1,6 +1,6 @@
 import React, { memo, useContext } from 'react'
 import MarkDown from 'markdown-to-jsx'
-import {ShowMarkdown} from 'src/layout/index'
+import { ShowMarkdown } from 'src/layout/index'
 
 import styles from './style.module.scss'
 
@@ -10,15 +10,13 @@ interface ListContainerProps {
 
 const ContainerMd = ({ content }: ListContainerProps) => {
   const useMarkdown = useContext(ShowMarkdown)
-  console.log(useMarkdown, ';cc')
   return (
     <div className={styles['list-container']}>
-      
-      {
-        useMarkdown === '1' ?
-          <MarkDown>{content}</MarkDown> :
-          <div className={styles['linebreak']}>{content}</div>
-      }
+      {useMarkdown === '1' ? (
+        <MarkDown>{content}</MarkDown>
+      ) : (
+        <div className={styles['linebreak']}>{content}</div>
+      )}
     </div>
   )
 }

src/components/common/list-item-header/index.tsx

@@ -2,6 +2,7 @@ import React, { Fragment, memo } from 'react'
 
 import MySvg from 'src/components/svg'
 import styles from './style.module.scss'
+import ContainerMd from 'src/components/common/container-md'
 
 interface HeaderProps {
   headerData: any
@@ -15,17 +16,21 @@ const handleArr = function (item: string | string[]) {
   if (Object.prototype.toString.call(item) === '[object Array]') {
     return item.join(' - ')
   }
+  return ''
 }
 
 const ListItemHeader = ({ headerData, icon }: HeaderProps) => {
   return (
     <div className={styles['list-item-header']}>
-      {Object.keys(headerData).map((key: any, index: number) => (
-        <Fragment key={key}>
-          {index === 0 && icon && <MySvg iconName={icon} />}
-          <span>{handleArr(headerData[key])}</span>
-        </Fragment>
-      ))}
+      {Object.keys(headerData)
+        .reverse()
+        .map((key: any, index: number) => (
+          <Fragment key={key}>
+            {index === 0 && icon && <MySvg iconName={icon} />}
+            {/* <span>{handleArr(headerData[key])}</span> */}
+            <ContainerMd content={handleArr(headerData[key])} />
+          </Fragment>
+        ))}
     </div>
   )
 }