feats

package.json

     "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
     "lint:prettier": "prettier --check \"src/**/*\" --end-of-line auto",
     "lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
-    "precommit": "lint-staged",
     "prettier": "prettier -c --write \"src/**/*\"",
     "start": "cross-env UMI_ENV=dev umi dev",
     "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev umi dev",
     "md5": "^2.3.0",
     "moment": "^2.25.3",
     "omit.js": "^2.0.2",
-    "react": "^16.14.0",
+    "react": "17.0.0",
     "react-dev-inspector": "^1.1.1",
     "react-dom": "^17.0.0",
     "react-helmet-async": "^1.0.4",
+    "react-player": "^2.9.0",
     "umi": "^3.4.1",
     "umi-request": "^1.0.8",
     "wangeditor": "^4.6.15"

src/components/Authorized/CheckPermissions.jsx

 export { checkPermissions };
 
 function check(authority, target, Exception) {
-  const permit = typeof CURRENT === 'function' ? CURRENT() : CURRENT
+  const permit = typeof CURRENT === 'function' ? CURRENT() : CURRENT;
   return checkPermissions(authority, permit, target, Exception);
 }
 

src/components/Authorized/renderAuthorize.js

  * @param {string|()=>String} currentAuthority
  */
 const renderAuthorize = (Authorized) => (currentAuthority) => {
-  CURRENT = currentAuthority
+  CURRENT = currentAuthority;
   return Authorized;
 };
 

src/components/Container/index.jsx

-import React from 'react'
-import { Spin } from 'antd'
+import React from 'react';
+import { Spin } from 'antd';
 
 export default (props) => {
-  const loading = typeof props.loading === 'boolean' ? props.loading : false
+  const loading = typeof props.loading === 'boolean' ? props.loading : false;
 
   return (
     <Spin spinning={loading} tip={props.loadingTip}>
       <div style={{ background: '#fff', padding: '2em' }}>{props.children}</div>
     </Spin>
-  )
-}
+  );
+};

src/components/GlobalHeader/AvatarDropdown.jsx

     return currentUser && currentUser.userName ? (
       <HeaderDropdown overlay={menuHeaderDropdown}>
         <span className={`${styles.action} ${styles.account}`}>
-          <Avatar size="small" className={styles.avatar} src={currentUser.avatar || 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png'} alt="avatar" />
+          <Avatar
+            size="small"
+            className={styles.avatar}
+            src={
+              currentUser.avatar ||
+              'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png'
+            }
+            alt="avatar"
+          />
           <span className={`${styles.name} anticon`}>{currentUser.userName}</span>
         </span>
       </HeaderDropdown>

src/components/GlobalHeader/NoticeIconView.jsx

       });
     }
   };
+
   handleNoticeClear = (title, key) => {
     const { dispatch } = this.props;
     message.success(`${'清空了'} ${title}`);
       });
     }
   };
+
   getNoticeData = () => {
     const { notices = [] } = this.props;
 
     });
     return groupBy(newNotices, 'type');
   };
+
   getUnreadData = (noticeData) => {
     const unreadMsg = {};
     Object.keys(noticeData).forEach((key) => {

src/components/NoticeIcon/NoticeList.jsx

         renderItem={(item, i) => {
           const itemCls = classNames(styles.item, {
             [styles.read]: item.read,
-          }); // eslint-disable-next-line no-nested-ternary
+          });
 
+          // eslint-disable-next-line no-nested-ternary
           const leftIcon = item.avatar ? (
             typeof item.avatar === 'string' ? (
               <Avatar className={styles.avatar} src={item.avatar} />

src/components/NoticeIcon/index.jsx

 import NoticeList from './NoticeList';
 import HeaderDropdown from '../HeaderDropdown';
 import styles from './index.less';
+
 const { TabPane } = Tabs;
 
 const NoticeIcon = (props) => {

src/components/TestQuestions/index.jsx

+import React, { useState } from 'react';
+import { Button, Row, Col, Checkbox, Radio, Input, Space } from 'antd';
+import WangEditor from '@/components/WangEditor';
+
+export default (props) => {
+  const [formData, setFormData] = useState({
+    question: undefined,
+    answerType: 'radio',
+    correctAnswers: undefined,
+    optionA: undefined,
+    optionB: undefined,
+    optionC: undefined,
+    optionD: undefined,
+  });
+
+  // const [answerTypeValue, setAnswerTypeValue] = useState([])
+
+  const handleFormChange = (field) => (e) => {
+    const value = e && e.target ? e.target.value : e;
+    console.log('------111--->', field, e, value);
+    setFormData({
+      ...formData,
+      [field]: value,
+    });
+  };
+
+  const handleCorrectAnswers = () => {};
+
+  const handleSubmit = () => {};
+
+  const handleCancel = () => {
+    if (props.onCancel) {
+      props.onCancel();
+    }
+  };
+
+  const answerTypeDict = [
+    { value: 'switch', label: '判断' },
+    { value: 'radio', label: '单选' },
+    { value: 'checkbox', label: '多选' },
+  ];
+
+  return (
+    <div>
+      <Space size="large" direction="vertical" style={{ width: '100%' }}>
+        <section>
+          <h3>试题:</h3>
+          <WangEditor value={formData.question} onChange={handleFormChange('question')} />
+        </section>
+
+        <section>
+          <h3>选项:</h3>
+          <Space size="large" direction="vertical" style={{ width: '100%' }}>
+            <Row gutter="24">
+              <Col span={12}>
+                <Input addonBefore="A" onChange={handleFormChange('optionA')} />
+              </Col>
+              <Col span={12}>
+                <Input addonBefore="B" onChange={handleFormChange('optionB')} />
+              </Col>
+            </Row>
+            <Row gutter="24">
+              <Col span={12}>
+                <Input addonBefore="C" onChange={handleFormChange('optionC')} />
+              </Col>
+              <Col span={12}>
+                <Input addonBefore="D" onChange={handleFormChange('optionD')} />
+              </Col>
+            </Row>
+          </Space>
+        </section>
+
+        <section>
+          <Row gutter="24">
+            <Col span={12}>
+              <h3>题型:</h3>
+              <Radio.Group
+                options={answerTypeDict}
+                value={formData.answerType}
+                onChange={handleFormChange('answerType')}
+              />
+            </Col>
+            <Col span={12}>
+              <h3>正确答案:</h3>
+              {formData.answerType === 'switch' && (
+                <Radio.Group onChange={handleCorrectAnswers} style={{ width: '100%' }}>
+                  <Row gutter="12">
+                    <Col span={6}>
+                      <Radio value="A">是</Radio>
+                    </Col>
+                    <Col span={6}>
+                      <Radio value="B">否</Radio>
+                    </Col>
+                  </Row>
+                </Radio.Group>
+              )}
+              {formData.answerType === 'radio' && (
+                <Radio.Group onChange={handleCorrectAnswers} style={{ width: '100%' }}>
+                  <Row gutter="12">
+                    <Col span={6}>
+                      <Radio value="A">A</Radio>
+                    </Col>
+                    <Col span={6}>
+                      <Radio value="B">B</Radio>
+                    </Col>
+                    <Col span={6}>
+                      <Radio value="C">C</Radio>
+                    </Col>
+                    <Col span={6}>
+                      <Radio value="D">D</Radio>
+                    </Col>
+                  </Row>
+                </Radio.Group>
+              )}
+              {formData.answerType === 'checkbox' && (
+                <Checkbox.Group onChange={handleCorrectAnswers} style={{ width: '100%' }}>
+                  <Row gutter="12">
+                    <Col span={6}>
+                      <Checkbox value="A">A</Checkbox>
+                    </Col>
+                    <Col span={6}>
+                      <Checkbox value="B">B</Checkbox>
+                    </Col>
+                    <Col span={6}>
+                      <Checkbox value="C">C</Checkbox>
+                    </Col>
+                    <Col span={6}>
+                      <Checkbox value="D">D</Checkbox>
+                    </Col>
+                  </Row>
+                </Checkbox.Group>
+              )}
+            </Col>
+          </Row>
+        </section>
+
+        <section>
+          <Row gutter="24">
+            <Col span={4}>
+              <Button type="primary" onClick={handleSubmit}>
+                确定
+              </Button>
+            </Col>
+            <Col span={4}>
+              <Button type="default" onClick={handleCancel}>
+                取消
+              </Button>
+            </Col>
+          </Row>
+        </section>
+      </Space>
+    </div>
+  );
+};

src/components/UploadImage/index.jsx

-import React, { useState, useCallback } from 'react'
-import { Upload, notification } from 'antd'
-import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
-import uploadFile from '@/utils/uploadFile'
+import React, { useState, useCallback } from 'react';
+import { Upload, notification } from 'antd';
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
+import uploadFile from '@/utils/uploadFile';
 
 export default (props) => {
-  const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(false);
 
-  const handleChange = useCallback(({ file }) => {
-    switch (file.status) {
-      case 'done':
-        setLoading(false)
-        props.onChange(file.response)
-        break
-      case 'error':
-        setLoading(false)
-        notification.error({ message: file.error })
-      break
-      default:
-        setLoading(true)
-    }
-  }, [props])
+  const handleChange = useCallback(
+    ({ file }) => {
+      switch (file.status) {
+        case 'done':
+          setLoading(false);
+          props.onChange(file.response);
+          break;
+        case 'error':
+          setLoading(false);
+          notification.error({ message: file.error });
+          break;
+        default:
+          setLoading(true);
+      }
+    },
+    [props],
+  );
 
   return (
     <Upload
       customRequest={uploadFile}
       onChange={handleChange}
     >
-      {
-        props.value ?
-          <img src={props.value} width="100%" alt="" /> :
-          <div>
-            {loading ? <LoadingOutlined /> : <PlusOutlined />}
-            <div style={{ marginTop: 8 }}>上传</div>
-          </div>
-      }
+      {props.value ? (
+        <img src={props.value} width="100%" alt="" />
+      ) : (
+        <div>
+          {loading ? <LoadingOutlined /> : <PlusOutlined />}
+          <div style={{ marginTop: 8 }}>上传</div>
+        </div>
+      )}
     </Upload>
-  )
-}
+  );
+};

src/components/UploadVideo/index.jsx

+import React, { useState, useCallback } from 'react';
+import { Button, Spin, Upload, notification } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+import ReactPlayer from 'react-player/lazy';
+import uploadFile from '@/utils/uploadFile';
+
+import Styles from './style.less';
+
+export default (props) => {
+  const [loading, setLoading] = useState(false);
+
+  const handleChange = useCallback(
+    ({ file }) => {
+      switch (file.status) {
+        case 'done':
+          setLoading(false);
+          props.onChange(file.response);
+          break;
+        case 'error':
+          setLoading(false);
+          notification.error({ message: file.error });
+          break;
+        default:
+          setLoading(true);
+      }
+    },
+    [props],
+  );
+
+  return (
+    <div className={Styles['player-wrapper']}>
+      <div className={Styles['upload-btn']}>
+        <Upload maxCount={1} customRequest={uploadFile} onChange={handleChange}>
+          <Button icon={<UploadOutlined />}>上传视频</Button>
+        </Upload>
+      </div>
+      <Spin spinning={loading}>
+        <div className={Styles['react-player']}>
+          <ReactPlayer controls muted url={props.value} width="100%" height="100%" />
+        </div>
+      </Spin>
+    </div>
+  );
+};

src/components/UploadVideo/style.less

+.player-wrapper {
+  width: 600px;
+}
+
+.react-player {
+  width: 600px;
+  height: 375px;
+  margin: 1em 0;
+  background: rgba(0, 0, 0, 0.2);
+}

src/components/WangEditor/Preview.jsx

-import React, { useEffect, useRef } from 'react'
-import { Modal } from 'antd'
+import React, { useEffect, useRef } from 'react';
+import { Modal } from 'antd';
 
-export default props => {
-  const ref = useRef()
+export default (props) => {
+  const ref = useRef();
 
   useEffect(() => {
-    let t = null
+    let t = null;
     if (props.visible) {
       // 防止 postMessage 的时候 iframe 内容还没有加载完成
       t = setInterval(() => {
         // window.preViewFrame.window.postMessage(props.html, '*')
         if (ref.current) {
-          ref.current.contentWindow.postMessage(props.html, '*')
+          ref.current.contentWindow.postMessage(props.html, '*');
         }
-      }, 800)
+      }, 800);
     }
 
-    return () => t && clearInterval(t)
-  }, [props.visible, props.html])
+    return () => t && clearInterval(t);
+  }, [props.visible, props.html]);
 
   return (
     <Modal
       closable={false}
       title={null}
       onCancel={props.onCancel}
-      >
+    >
       <iframe
         ref={ref}
-        style={{width: '100%', height: '100%'}}
+        style={{ width: '100%', height: '100%' }}
         src={`${window.location.origin}/preview-html/index.html`}
         frameBorder={0}
         name="preViewFrame"
       ></iframe>
     </Modal>
-  )
-}
+  );
+};

src/components/WangEditor/PreviewMenu.js

-import E from 'wangeditor'
+import E from 'wangeditor';
 
-const { BtnMenu } = E
+const { BtnMenu } = E;
 
 class PreViewMenu extends BtnMenu {
   constructor(editor) {
     // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
-      const $elem = E.$(
-          `<div class="w-e-menu" data-title="预览">
+    const $elem = E.$(
+      `<div class="w-e-menu" data-title="预览">
             <i>预览</i>
-          </div>`
-      )
-      super($elem, editor)
-      this.editor = editor
-      // <i class="w-e-icon-fullscreen"></i>
+          </div>`,
+    );
+    super($elem, editor);
+    this.editor = editor;
+    // <i class="w-e-icon-fullscreen"></i>
   }
 
   static preview() {}
 
   clickHandler() {
-    PreViewMenu.preview(this.editor.txt.html())
+    PreViewMenu.preview(this.editor.txt.html());
   }
 
-  tryChangeActive(){}
+  tryChangeActive() {}
 }
 
-export default PreViewMenu
+export default PreViewMenu;

src/components/WangEditor/WangEditor.jsx

 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import E from 'wangeditor';
-import PreviewMenu from './PreviewMenu'
-import Preview from './Preview'
-import { fetch, apis } from '../../utils/request';
-
-export default props => {
-  const ref = useRef()
-  const editorRef = useRef()
-  const [preview, setPreview] = useState(false)
-  const [content, setContent] = useState()
-
-  // wangeditor 有bug, 初始先触发 onchange
-  const firstChanged = useRef(false)
+// import PreviewMenu from './PreviewMenu'
+import Preview from './Preview';
+import { uploadImage } from '@/utils/uploadFile';
+
+export default (props) => {
+  const ref = useRef();
+  const editorRef = useRef();
+  const [preview, setPreview] = useState(false);
+  // const [content, setContent] = useState()
+
+  const inited = useRef(false);
+  const handleChange = useCallback(
+    (html) => {
+      if ((inited.current || html) && typeof props.onChange === 'function') {
+        inited.current = true;
+        props.onChange(html);
+      }
+    },
+    [props],
+  );
 
   const initEditor = useCallback(() => {
-    const editor = new E(ref.current)
-    editorRef.current = editor
-    
+    const editor = new E(ref.current);
+    editorRef.current = editor;
+
     // 取消自动 focus
-    editor.config.focus = false
+    editor.config.focus = false;
 
     // 触发 change
-    editor.config.onchange = html => {
-      // 规避 bug
-      if (!firstChanged.current) {
-        firstChanged.current = true
-        return
-      }
+    editor.config.onchange = handleChange;
 
-      setContent(html)
-
-      if (typeof props.onChange === 'function') {
-        props.onChange(html)
-      }
-    }
-
-    editor.config.zIndex = 100
+    editor.config.zIndex = 100;
 
     // 自定义图片上传
-    editor.config.uploadImgMaxLength = 1
-    editor.config.customUploadImg = function (files, insert) {
-      if (!files.length) return
-      
-      const data = new FormData()
-      data.append('file', files[0])
-      fetch(apis.image.upload)({data}).then(insert)
-    }
+    editor.config.uploadImgMaxLength = 1;
+    editor.config.customUploadImg = (files, insert) => {
+      if (!files.length) return;
+
+      uploadImage(files[0]).then(insert);
+    };
 
     // 扩展预览按钮
-    editor.menus.extend('previewMenu', PreviewMenu)
-    PreviewMenu.preview = (html) => setPreview(true)
+    // editor.menus.extend('previewMenu', PreviewMenu)
+    // PreviewMenu.preview = (html) => setPreview(true)
 
     // 配置菜单
     editor.config.menus = [
-      'head',  // 标题
-      'bold',  // 粗体
-      'fontSize',  // 字号
-      'fontName',  // 字体
-      'italic',  // 斜体
-      'underline',  // 下划线
-      'strikeThrough',  // 删除线
-      'foreColor',  // 文字颜色
-      'backColor',  // 背景颜色
-      'list',  // 列表
-      'justify',  // 对齐方式
-      'quote',  // 引用
-      'image',  // 插入图片
-      'undo',  // 撤销
-      'redo',  // 重复
-      'previewMenu'
-    ]
+      'head', // 标题
+      'bold', // 粗体
+      'fontSize', // 字号
+      'fontName', // 字体
+      'italic', // 斜体
+      'underline', // 下划线
+      'strikeThrough', // 删除线
+      'foreColor', // 文字颜色
+      'backColor', // 背景颜色
+      'list', // 列表
+      'justify', // 对齐方式
+      'quote', // 引用
+      'image', // 插入图片
+      'undo', // 撤销
+      'redo', // 重复
+      // 'previewMenu'
+    ];
 
     // 过滤 word 字符
-    editor.config.pasteFilterStyle = false
-    editor.config.pasteTextHandle = ctt => {
+    editor.config.pasteFilterStyle = false;
+    editor.config.pasteTextHandle = (ctt) => {
       const regs = [
-        /<!--\[if [\s\S]*?endif\]-->/ig,
-        /<[a-zA-Z0-9]+\:[^>]+>[^>]*<\/[a-zA-Z0-9]+\:[^>]+>/ig,
-        /<[a-zA-Z0-9]+\:[^>]+\/>/ig,
-        /<style>[\s\S]*?<\/style>/ig,
-        new RegExp('\u2029', 'ig'),     // 替换word分隔符 序号 8233
-      ]
+        /<!--\[if [\s\S]*?endif\]-->/gi,
+        /<[a-zA-Z0-9]+:[^>]+>[^>]*<\/[a-zA-Z0-9]+:[^>]+>/gi,
+        /<[a-zA-Z0-9]+:[^>]+\/>/gi,
+        /<style>[\s\S]*?<\/style>/gi,
+        new RegExp('\u2029', 'ig'), // 替换word分隔符 序号 8233
+      ];
 
       return regs.reduce((acc, reg) => {
-        return acc.replace(reg, '')
-      }, ctt)
-    }
+        return acc.replace(reg, '');
+      }, ctt);
+    };
 
-    editor.create()
-    editor.$textElem.attr('contenteditable', props.contenteditable !== false)
+    editor.create();
+    editor.$textElem.attr('contenteditable', props.contenteditable !== false);
 
-    return () => editor.destroy()
-  }, [props.contenteditable])
+    return () => editor.destroy();
+  }, [props, handleChange]);
 
   useEffect(() => {
-    initEditor()
-  }, [])
-  
+    initEditor();
+  }, [initEditor]);
+
+  //
   useEffect(() => {
-    if (props.value !== content && editorRef.current) {
-      setContent(props.value)
-      editorRef.current.txt.html(props.value)
+    if (props.value && !inited.current && editorRef.current) {
+      inited.current = true;
+      editorRef.current.txt.html(props.value);
     }
-  }, [props.value, content])
+  }, [props.value]);
 
   return (
     <>
       <div ref={ref} style={{ textAlign: 'left' }} />
       <Preview
         width={426}
-        style={{width: '426px', height: '863px', margin: 0, padding: 0}}
+        style={{ width: '426px', height: '863px', margin: 0, padding: 0 }}
         visible={preview}
         html={props.value}
         onCancel={() => setPreview(false)}
       />
     </>
-  )
-}
+  );
+};

src/components/WangEditor/index.js

+import WangEditor from './WangEditor';
+
+export default WangEditor;

src/global.jsx

       // useIntl().formatMessage({
       //   id: 'app.pwa.offline',
       // }),
-      "当前处于离线状态"
+      '当前处于离线状态',
     );
   }); // Pop up a prompt on the page asking the user if they want to use the latest version
 

src/layouts/BasicLayout.jsx

  * @see You can view component api by: https://github.com/ant-design/ant-design-pro-layout
  */
 import ProLayout, { DefaultFooter } from '@ant-design/pro-layout';
-import React, { useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
 // import { Link, useIntl, connect, history } from 'umi';
 import { Link, connect, history } from 'umi';
-import { GithubOutlined } from '@ant-design/icons';
+// import { GithubOutlined } from '@ant-design/icons';
 import { Result, Button } from 'antd';
 import Authorized from '@/utils/Authorized';
-import { getCurrentRoute } from '@/utils/utils'
+import { getCurrentRoute } from '@/utils/utils';
 import RightContent from '@/components/GlobalHeader/RightContent';
 // import { getMatchMenu } from '@umijs/route-utils';
 import logo from '../assets/logo.svg';
 /** Use Authorized check all menu item */
 const menuDataRender = (menuRoles) => (menuList) =>
   menuList.map((item) => {
-    const needAuth = !!item.menuCode
+    const needAuth = !!item.menuCode;
 
-    const authority = (menuRoles.filter(x => x.menuCode === item.menuCode)[0] || {}).roleString || ''
+    const authority =
+      (menuRoles.filter((x) => x.menuCode === item.menuCode)[0] || {}).roleString || '';
 
     const localItem = {
       ...item,
 const defaultFooterDom = (
   <DefaultFooter
     copyright={`${new Date().getFullYear()} 云致科技`}
-    links={[
-      // {
-      //   key: 'Ant Design Pro',
-      //   title: 'Ant Design Pro',
-      //   href: 'https://pro.ant.design',
-      //   blankTarget: true,
-      // },
-      // {
-      //   key: 'github',
-      //   title: <GithubOutlined />,
-      //   href: 'https://github.com/ant-design/ant-design-pro',
-      //   blankTarget: true,
-      // },
-      // {
-      //   key: 'Ant Design',
-      //   title: 'Ant Design',
-      //   href: 'https://ant.design',
-      //   blankTarget: true,
-      // },
-    ]}
+    links={
+      [
+        // {
+        //   key: 'Ant Design Pro',
+        //   title: 'Ant Design Pro',
+        //   href: 'https://pro.ant.design',
+        //   blankTarget: true,
+        // },
+        // {
+        //   key: 'github',
+        //   title: <GithubOutlined />,
+        //   href: 'https://github.com/ant-design/ant-design-pro',
+        //   blankTarget: true,
+        // },
+        // {
+        //   key: 'Ant Design',
+        //   title: 'Ant Design',
+        //   href: 'https://ant.design',
+        //   blankTarget: true,
+        // },
+      ]
+    }
   />
 );
 
     }
   }; // get children authority
 
-  const authorized = useMemo(
-    () => {
-      const routeItem = getCurrentRoute(location.pathname || '/')
-      if (!routeItem || !routeItem.menuCode) {
-        return { authority: undefined }
-      }
+  const authorized = useMemo(() => {
+    const routeItem = getCurrentRoute(location.pathname || '/');
+    if (!routeItem || !routeItem.menuCode) {
+      return { authority: undefined };
+    }
 
-      const authority = (menus.filter(x => x.menuCode === routeItem.menuCode)[0] || {}).roleString
-      return {
-        authority: authority ? authority.split(',') : ['any-string-for-no-right']
-      }
-    },
-    [location.pathname, menus],
-  );
+    const authority = (menus.filter((x) => x.menuCode === routeItem.menuCode)[0] || {}).roleString;
+    return {
+      authority: authority ? authority.split(',') : ['any-string-for-no-right'],
+    };
+  }, [location.pathname, menus]);
 
   // const { formatMessage } = useIntl();
 

src/layouts/UserLayout.jsx

   const { breadcrumb } = getMenuData(routes);
   const title = getPageTitle({
     pathname: location.pathname,
-    formatMessage: x => x,
+    formatMessage: (x) => x,
     breadcrumb,
     ...props,
   });

src/locales/en-US.js

 import settingDrawer from './en-US/settingDrawer';
 import settings from './en-US/settings';
 import pages from './en-US/pages';
+
 export default {
   'navBar.lang': 'Languages',
   'layout.user.link.help': 'Help',

src/locales/id-ID.js

 import settingDrawer from './id-ID/settingDrawer';
 import settings from './id-ID/settings';
 import pages from './id-ID/pages';
+
 export default {
   'navbar.lang': 'Bahasa',
   'layout.user.link.help': 'Bantuan',

src/locales/ja-JP.js

 import pwa from './ja-JP/pwa';
 import component from './ja-JP/component';
 import pages from './ja-JP/pages';
+
 export default {
   'navBar.lang': '言語',
   'layout.user.link.help': 'ヘルプ',

src/locales/pt-BR.js

 import pwa from './pt-BR/pwa';
 import settingDrawer from './pt-BR/settingDrawer';
 import settings from './pt-BR/settings';
+
 export default {
   'navBar.lang': 'Idiomas',
   'layout.user.link.help': 'ajuda',

src/locales/zh-CN.js

 import settingDrawer from './zh-CN/settingDrawer';
 import settings from './zh-CN/settings';
 import pages from './zh-CN/pages';
+
 export default {
   'navBar.lang': '语言',
   'layout.user.link.help': '帮助',

src/locales/zh-TW.js

 import pwa from './zh-TW/pwa';
 import settingDrawer from './zh-TW/settingDrawer';
 import settings from './zh-TW/settings';
+
 export default {
   'navBar.lang': '語言',
   'layout.user.link.help': '幫助',

src/models/global.js

 import { queryNotices } from '@/services/user';
+
 const GlobalModel = {
   namespace: 'global',
   state: {

src/models/login.js

   },
   effects: {
     *login({ payload }, { call, put }) {
-      let response
-      let status
+      let response;
+      let status;
       try {
         response = yield call(userLogin, payload);
-        status = 'success'
+        status = 'success';
       } catch (e) {
         // message.error(e.message)
-        status = 'error'
+        status = 'error';
       }
 
       yield put({
       });
 
       if (status === 'success') {
-        localStorage.setItem('token', response.token)
+        localStorage.setItem('token', response.token);
 
         const urlParams = new URL(window.location.href);
         const params = getPageQuery();
         message.success('🎉 🎉 🎉  登录成功！');
         let { redirect } = params;
-  
+
         if (redirect) {
           const redirectUrlParams = new URL(redirect);
-  
+
           if (redirectUrlParams.origin === urlParams.origin) {
             redirect = redirect.substr(urlParams.origin.length);
-  
+
             if (window.routerBase !== '/') {
               redirect = redirect.replace(window.routerBase, '/');
             }
-  
+
             if (redirect.match(/^\/.*#/)) {
               redirect = redirect.substr(redirect.indexOf('#') + 1);
             }
             return;
           }
         }
-  
+
         history.replace(redirect || '/');
       }
     },

src/models/user.js

   },
   reducers: {
     saveCurrentUser(state, action) {
-      const { user, menus, roles } = action.payload || {}
+      const { user, menus, roles } = action.payload || {};
 
-      setAuthority(roles.map(x => `${x.roleId}`))
+      setAuthority(roles.map((x) => `${x.roleId}`));
 
       return { ...state, currentUser: user, menus };
     },

src/pages/Admin.jsx

 export default () => {
   // const intl = useIntl();
   return (
-    <PageHeaderWrapper content="这个页面只有 admin 权限才能查看"
+    <PageHeaderWrapper
+      content="这个页面只有 admin 权限才能查看"
       // content={intl.formatMessage({
       //   id: 'pages.admin.subPage.title',
       //   defaultMessage: ' 这个页面只有 admin 权限才能查看',

src/pages/Post/Edit/components/Answer.jsx

+import React from 'react';
+import TestQuestions from '@/components/TestQuestions';
+
+export default () => {
+  return (
+    <div>
+      <TestQuestions />
+    </div>
+  );
+};

src/pages/Post/Edit/components/Form.jsx

-import React, { useEffect, useMemo } from 'react'
-import ProForm,
-  {
-    ProFormText,
-    ProFormSelect,
-    ProFormUploadButton,
-    ProFormTextArea,
-    ProFormSwitch,
-    ProFormDigit,
-    ProFormRadio,
-  } from '@ant-design/pro-form'
-import UploadImage from '@/components/UploadImage'
-import request from '@/utils/request'
-import { notification, Form } from 'antd'
-  
+import React, { useEffect, useMemo, useState } from 'react';
+import ProForm, {
+  ProFormText,
+  ProFormSelect,
+  ProFormTextArea,
+  ProFormSwitch,
+  ProFormDigit,
+  ProFormRadio,
+} from '@ant-design/pro-form';
+import UploadImage from '@/components/UploadImage';
+import UploadVideo from '@/components/UploadVideo';
+import WangEditor from '@/components/WangEditor';
+import request from '@/utils/request';
+import { notification, Form } from 'antd';
+
 export default (props) => {
-  const [form] = Form.useForm()
-  
+  const [form] = Form.useForm();
+  const [isVideo, setIsVideo] = useState(false);
+
   const typeDict = useMemo(() => {
     return (props.typeList || []).reduce((acc, item) => {
       return {
         ...acc,
-        [item.typeId]: item.name
-      }
-    }, {})
-  }, [props.typeList])
+        [item.typeId]: item.name,
+      };
+    }, {});
+  }, [props.typeList]);
 
   const handleSubmit = (values) => {
     if (!values.postId) {
-      return request('/post', { method: 'post', data: values }).then((res) => {
-        props.onChange(res)
-      }).catch((e) => {
-        notification.error({ message: e.message })
-        return Promise.reject(e.message)
-      })
+      return request('/post', { method: 'post', data: values })
+        .then((res) => {
+          props.onChange(res);
+        })
+        .catch((e) => {
+          notification.error({ message: e.message });
+          return Promise.reject(e.message);
+        });
     }
-  }
+
+    // eslint-disable-next-line
+    return;
+  };
+
+  const handleValueChange = (changed) => {
+    const key = Object.keys(changed)[0];
+
+    if (key === 'isVideo') {
+      setIsVideo(changed[key]);
+    }
+  };
 
   useEffect(() => {
     if (props.post && props.post.postId) {
-      form.setFieldsValue(props.post)
+      form.setFieldsValue(props.post);
+      setIsVideo(props.post.isVideo);
     }
-  }, [props.post, form])
+  }, [props.post, form]);
 
   return (
-    <ProForm form={form} onFinish={handleSubmit}>
+    <ProForm form={form} onFinish={handleSubmit} onValuesChange={handleValueChange}>
       <ProFormText
         label="标题"
         placeholder="请输入标题"
         <UploadImage />
       </Form.Item>
 
-      <ProFormTextArea
-        label="简介"
-        placeholder="请输入简介"
-        name="summary"
-      />
+      <ProFormTextArea label="简介" placeholder="请输入简介" name="summary" />
 
-      <ProFormSwitch
-        label="视频"
-        name="isVideo"
-        checkedChildren="视频"
-        unCheckedChildren="图文"
-      />
+      <ProFormSwitch label="视频" name="isVideo" checkedChildren="视频" unCheckedChildren="图文" />
+
+      {isVideo ? (
+        <>
+          <Form.Item name="videoPoster" label="视频封面" placeholder="请设置封面">
+            <UploadImage />
+          </Form.Item>
+          <Form.Item name="videoUrl" label="视频地址" placeholder="请上传视频">
+            <UploadVideo />
+          </Form.Item>
+        </>
+      ) : (
+        <Form.Item name="videoUrl" label="图文内容" placeholder="请填写图文内容">
+          <WangEditor />
+        </Form.Item>
+      )}
 
       <ProFormDigit
         label="答题数"
         precision={0}
       />
 
-      <ProFormSwitch
-        label="热门"
-        name="isTopic"
-        checkedChildren="是"
-        unCheckedChildren="否"
-      />
+      <ProFormSwitch label="热门" name="isTopic" checkedChildren="是" unCheckedChildren="否" />
 
       <ProFormRadio.Group
         label="状态"
           },
         ]}
       />
-      
-      <ProFormText
-        label="创建日期"
-        name="createDate"
-        readonly
-      />
+
+      <ProFormText label="创建日期" name="createDate" readonly />
     </ProForm>
-  )
-}
+  );
+};

src/pages/Post/Edit/index.jsx

-import React, { useEffect, useMemo, useState } from 'react'
-import { connect } from 'umi'
-import { notification, Tabs } from 'antd'
-import { PageContainer } from '@ant-design/pro-layout'
-import Container from '@/components/Container'
-import request from '@/utils/request'
-import PostForm from './components/Form'
+import React, { useEffect, useState } from 'react';
+import { connect } from 'umi';
+import { notification, Tabs } from 'antd';
+import { PageContainer } from '@ant-design/pro-layout';
+import Container from '@/components/Container';
+import request from '@/utils/request';
+import PostForm from './components/Form';
+import Answer from './components/Answer';
+
+const { TabPane } = Tabs;
 
-const { TabPane } = Tabs
-  
 const PostEdit = (props) => {
-  const { id } = props.location.query
-  const [loading, setLoading] = useState(false)
-  const [post, setPost] = useState({})
+  const { id } = props.location.query;
+  const [loading, setLoading] = useState(false);
+  const [post, setPost] = useState({});
 
   const handleFormChange = (newPost) => {
-    setPost(newPost)
-  }
+    setPost(newPost);
+  };
 
   useEffect(() => {
-    setLoading(true)
-    request(`/post/${id}`).then((res) => {
-      setPost(res)
-      setLoading(false)
-    }).catch((e) => {
-      setLoading(false)
-      notification.error({ message: e.message })
-    })
-  }, [id])
+    setLoading(true);
+    request(`/post/${id}`)
+      .then((res) => {
+        setPost(res);
+        setLoading(false);
+      })
+      .catch((e) => {
+        setLoading(false);
+        notification.error({ message: e.message });
+      });
+  }, [id]);
 
   useEffect(() => {
     if (!props.typeList || !props.typeList.length) {
       props.dispatch({
         type: 'post/getTypeList',
-        payload: { pageSize: 999 }
-      })
+        payload: { pageSize: 999 },
+      });
     }
-  }, [props])
+  }, [props]);
 
   return (
     <PageContainer>
           </TabPane>
           <TabPane tab="题库设置" key="2">
             <Container>
+              <Answer />
             </Container>
           </TabPane>
         </Tabs>
       </Container>
     </PageContainer>
-  )
-}
+  );
+};
 
 export default connect((s) => ({
-  typeList: s.post.typeList
-}))(PostEdit)
+  typeList: s.post.typeList,
+}))(PostEdit);

src/pages/Post/List/index.jsx

       key: 'option',
       valueType: 'option',
       render: (_, item) => [
-        <a key="opt1" onClick={() => history.push(`/post/edit?id=${item.postId}`)}>编辑</a>,
+        <a key="opt1" onClick={() => history.push(`/post/edit?id=${item.postId}`)}>
+          编辑
+        </a>,
       ],
     },
   ];

src/pages/TableList/components/UpdateForm.jsx

           rules={[
             {
               required: true,
-              message: "请输入规则名称！",
+              message: '请输入规则名称！',
               // message: (
               //   <FormattedMessage
               //     id="pages.searchTable.updateForm.ruleName.nameRules"
           rules={[
             {
               required: true,
-              message: "请输入至少五个字符的规则描述！",
+              message: '请输入至少五个字符的规则描述！',
               // message: (
               //   <FormattedMessage
               //     id="pages.searchTable.updateForm.ruleDesc.descRules"
           rules={[
             {
               required: true,
-              message: "请选择开始时间！",
+              message: '请选择开始时间！',
               // message: (
               //   <FormattedMessage
               //     id="pages.searchTable.updateForm.schedulingPeriod.timeRules"

src/pages/TableList/index.jsx

           extra={
             <div>
               {/* <FormattedMessage id="pages.searchTable.chosen" defaultMessage="已选择" /> */}
-              已选择 {' '}
+              已选择{' '}
               <a
                 style={{
                   fontWeight: 600,
               >
                 {selectedRowsState.length}
               </a>{' '}
-              项
-              {/* <FormattedMessage id="pages.searchTable.item" defaultMessage="项" /> */}
+              项{/* <FormattedMessage id="pages.searchTable.item" defaultMessage="项" /> */}
               &nbsp;&nbsp;
               <span>
                 {/* <FormattedMessage
                   id="pages.searchTable.totalServiceCalls"
                   defaultMessage="服务调用次数总计"
                 /> */}
-                服务调用次数总计
-                {' '}
-                {selectedRowsState.reduce((pre, item) => pre + item.callNo, 0)}{' '}
+                服务调用次数总计 {selectedRowsState.reduce((pre, item) => pre + item.callNo, 0)}{' '}
                 {/* <FormattedMessage id="pages.searchTable.tenThousand" defaultMessage="万" /> */}
                 万
               </span>

src/pages/TableList/service.js

 import request from '@/utils/request';
+
 export async function queryRule(params) {
   return request('/api/rule', {
     params,

src/pages/User/login/index.jsx

-import {
-  LockOutlined,
-  UserOutlined,
-} from '@ant-design/icons';
+import { LockOutlined, UserOutlined } from '@ant-design/icons';
 import { Alert } from 'antd';
-import React, { useState } from 'react';
+import React from 'react';
 import ProForm, { ProFormText } from '@ant-design/pro-form';
 // import { useIntl, connect, FormattedMessage } from 'umi';
 import { connect } from 'umi';
-import md5 from 'md5'
+import md5 from 'md5';
 
 import styles from './index.less';
 
         }}
       >
         {status === 'error' && !submitting && (
-          <LoginMessage content="账户或密码错误"
+          <LoginMessage
+            content="账户或密码错误"
             // content={intl.formatMessage({
             //   id: 'pages.login.accountLogin.errorMessage',
             //   defaultMessage: '账户或密码错误（admin/ant.design)',
           rules={[
             {
               required: true,
-              message: "请输入用户名!",
+              message: '请输入用户名!',
               // message: (
               //   <FormattedMessage
               //     id="pages.login.username.required"
               //     defaultMessage="请输入密码！"
               //   />
               // ),
-              message: "请输入密码!"
+              message: '请输入密码!',
             },
           ]}
         />

src/pages/Welcome.jsx

         />
         <Typography.Text strong>
           {/* <FormattedMessage id="pages.welcome.advancedComponent" defaultMessage="高级表格" /> */}
-          高级表格
-          {' '}
+          高级表格{' '}
           <a
             href="https://procomponents.ant.design/components/table"
             rel="noopener noreferrer"
           }}
         >
           {/* <FormattedMessage id="pages.welcome.advancedLayout" defaultMessage="高级布局" /> */}
-          高级布局
-          {' '}
+          高级布局{' '}
           <a
             href="https://procomponents.ant.design/components/layout"
             rel="noopener noreferrer"

src/pages/model.js

 const Model = {
   namespace: 'post',
   state: {
-    typeList: []
+    typeList: [],
   },
   effects: {
     *getTypeList({ payload }, { call, put }) {
-      let response
+      let response;
 
       try {
         response = yield call((params) => request('/post-type', { params }), payload);
       } catch (e) {
-        message.error(e.message)
-        return
+        message.error(e.message);
+        return;
       }
 
       yield put({

src/utils/authority.js

 import { reloadAuthorized } from './Authorized';
 
-const authority = { value: undefined }
+const authority = { value: undefined };
 
 export function getAuthority() {
   // 这个 if 不要删除
   // 虽然 authority 是全局的, 但是这个地方第一次仍然访问不到
   // 原因未知
   if (!authority) {
-    return undefined
+    return undefined;
   }
 
   return authority.value;
 }
 
 export function setAuthority(auth) {
-  authority.value = auth
+  authority.value = auth;
   reloadAuthorized();
 }

src/utils/request.js

       description: errorText,
     });
   } else if (error.code && error.message) {
-    throw new Error(error.message)
+    throw new Error(error.message);
   } else {
     notification.error({
       description: '您的网络发生异常，无法连接服务器',
 /** 配置request请求时的默认参数 */
 
 const request = extend({
-  prefix: process.env.NODE_ENV === 'production' ? '/api/admin' : '/api/admin', 
+  prefix: process.env.NODE_ENV === 'production' ? '/api/admin' : '/api/admin',
   errorHandler,
   // 默认错误处理
   credentials: 'include', // 默认请求是否带上cookie
 });
 
 request.interceptors.request.use((url, options) => {
-  const headers = options.headers || {}
-  const token = localStorage.getItem('token') ? { 'X-Authorization-JWT': localStorage.getItem('token') } : {}
+  const headers = options.headers || {};
+  const token = localStorage.getItem('token')
+    ? { 'X-Authorization-JWT': localStorage.getItem('token') }
+    : {};
 
   return {
     url,
         ...headers,
         ...token,
       },
-    }
-  }
-})
+    },
+  };
+});
 
 request.interceptors.response.use(async (response) => {
-  const token = response.headers.get('x-authorization-jwt')
+  const token = response.headers.get('x-authorization-jwt');
   if (token) {
-    localStorage.setItem('token', token)
+    localStorage.setItem('token', token);
   }
 
-  const contextType = response.headers.get('content-type')
+  const contextType = response.headers.get('content-type');
   if (contextType.indexOf('json') > -1) {
-    const result = await response.clone().json()
+    const result = await response.clone().json();
     if (result.code === 1000) {
-      return result.data
+      return result.data;
     }
-    return Promise.reject(result)
+    return Promise.reject(result);
   }
 
-  return response
-})
+  return response;
+});
 
 export default request;
 
 // 专门为 ProTable 定制的 request
 // https://procomponents.ant.design/components/table#request
 export const queryTable = (url) => {
-  return (params, sort, filter) => {
-    return new Promise((resolve, reject) => {
-      const { current, pageSize, ...leftParams } = params
+  return (params) => {
+    return new Promise((resolve) => {
+      const { current, pageSize, ...leftParams } = params;
       const options = {
         params: {
           pageNum: current,
           pageSize,
           ...leftParams,
-        }
-      }
+        },
+      };
 
-      request(url, options).then(res => {
-        // 成功返回 success: true
-        resolve({
-          success: true,
-          total: res.total,
-          data: res.records
+      request(url, options)
+        .then((res) => {
+          // 成功返回 success: true
+          resolve({
+            success: true,
+            total: res.total,
+            data: res.records,
+          });
         })
-      }).catch((e) => {
-        notification.error({
-          message: e.message,
+        .catch((e) => {
+          notification.error({
+            message: e.message,
+          });
+          // 失败返回 success: false
+          resolve({
+            success: false,
+            total: 0,
+            data: [],
+          });
         });
-        // 失败返回 success: false
-        resolve({
-          success: false,
-          total: 0,
-          data: []
-        })
-      })
-    })
-  }
-}
+    });
+  };
+};

src/utils/uploadFile.js

 
 // 通过 OSS STS 模式上传
 // oss client 是单例的
-let ossClient
-let stsInfo
+let ossClient;
+let stsInfo;
 
 function getOssClient() {
   // 请求 sts 临时授权
   return request('/oss-sts')
     .then((sts) => {
-      stsInfo = sts
+      stsInfo = sts;
       ossClient = new OSS({
         accessKeyId: sts.accessKeyId,
         accessKeySecret: sts.accessKeySecret,
               accessKeyId: res.accessKeyId,
               accessKeySecret: res.accessKeySecret,
               stsToken: res.stsToken,
-            }
-          })
-        }
+            };
+          });
+        },
       });
     })
     .catch((e) => {
 
 // https://github.com/react-component/upload#customrequest
 export default ({ file, onSuccess, onError }) => {
-
   const upload = () => {
     const data = new FormData();
     data.append('file', file);
       .catch((e2) => {
         onError(e2);
       });
-  }
+  };
 
   if (!ossClient) {
-    getOssClient().then(() => {
-      upload()
-    })
-    .catch((e) => {
-      onError(e);
-    });
+    getOssClient()
+      .then(() => {
+        upload();
+      })
+      .catch((e) => {
+        onError(e);
+      });
   } else {
-    upload()
+    upload();
   }
 
   return {
     abort: () => {},
   };
 };
+
+export function uploadImage(file) {
+  return new Promise((resolve, reject) => {
+    const upload = () => {
+      const data = new FormData();
+      data.append('file', file);
+      const now = new Date();
+      const fileName = `${stsInfo.path}/${now.valueOf()}-${file.name}`;
+
+      ossClient
+        .put(fileName, file)
+        .then((res) => {
+          resolve(res.url);
+        })
+        .catch((e2) => {
+          reject(e2);
+        });
+    };
+
+    if (!ossClient) {
+      getOssClient()
+        .then(() => {
+          upload();
+        })
+        .catch((e) => {
+          reject(e);
+        });
+    } else {
+      upload();
+    }
+  });
+}

src/utils/utils.js

 import { parse } from 'querystring';
-import routes from '../../config/routes'
+import routes from '../../config/routes';
 
 /* eslint no-useless-escape:0 import/prefer-default-export:0 */
 
 export const getPageQuery = () => parse(window.location.href.split('?')[1]);
 
 export function getCurrentRoute(pathname) {
-  const routeArr = []
+  const routeArr = [];
 
   const flatten = (list) => {
     list.forEach((route) => {
-      routeArr.push(route)
+      routeArr.push(route);
 
       if (route.routes) {
-        flatten(route.routes)
+        flatten(route.routes);
       }
-    })
-  }
+    });
+  };
 
   // 取有效的数据
-  flatten(routes[0].routes)
+  flatten(routes[0].routes);
 
-  return routeArr.filter(x => x.path === pathname)[0]
+  return routeArr.filter((x) => x.path === pathname)[0];
 }

src/utils/utils.test.js

 import { isUrl } from './utils';
+
 describe('isUrl tests', () => {
   it('should return false for invalid and corner case inputs', () => {
     expect(isUrl([])).toBeFalsy();