feat: optimize NotFound (#318)

* feat: optimize NotFound

* docs: basic use

---------

Co-authored-by: liuyi <>
Co-authored-by: liuyi <[email protected]>

Author: liuxy0551

src/notFound/__tests__/notFound.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { cleanup, render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import NotFound from '..';
+
+describe('test NotFound', () => {
+    afterEach(cleanup);
+
+    test('renders not found message', () => {
+        const { getByText } = render(<NotFound />);
+        const element = getByText(/亲，是不是走错地方了？/i);
+        expect(element).toBeInTheDocument();
+    });
+});

src/notFound/index.md

@@ -15,6 +15,9 @@ demo:
 ## 示例
 
 ```jsx
+/**
+ * title: "基础使用"
+ */
 import React from 'react';
 import { NotFound } from 'dt-react-component';
 

src/notFound/index.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-
 import { FrownOutlined } from '@ant-design/icons';
+import './style.scss';
+
+const NotFound: React.FC<any> = function () {
+    return (
+        <div className="dtc-not-found">
+            <h1>
+                <FrownOutlined /> 亲，是不是走错地方了？
+            </h1>
+        </div>
+    );
+};
 
-export default class NotFound extends React.Component<any, any> {
-    render() {
-        return (
-            <div style={{ lineHeight: '200px', textAlign: 'center' }}>
-                <h1>
-                    <FrownOutlined /> 亲，是不是走错地方了？
-                </h1>
-            </div>
-        );
-    }
-}
+export default NotFound;

src/notFound/style.scss

@@ -0,0 +1,4 @@
+.dtc-not-found {
+    line-height: 200px;
+    text-align: center;
+}