From feb7b4b6e0177e107ded8e21ac9f0bd05e56dd84 Mon Sep 17 00:00:00 2001
From: "DESKTOP-HR0JS52\\jun" <qqxion@163.com>
Date: Thu, 6 Oct 2022 23:24:51 +0800
Subject: [PATCH 1/3] =?UTF-8?q?view=E5=9F=BA=E6=9C=AC=E6=A1=86=E6=9E=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/style/vars.scss                    |  2 +
 src/components/View/index.module.scss         | 40 +++++++++++
 src/components/View/index.tsx                 | 70 +++++++++++++++++++
 .../apps/management/user/userinfo/index.tsx   |  7 +-
 4 files changed, 118 insertions(+), 1 deletion(-)
 create mode 100644 src/components/View/index.module.scss
 create mode 100644 src/components/View/index.tsx

diff --git a/src/common/style/vars.scss b/src/common/style/vars.scss
index 0b65be1..31adbe9 100644
--- a/src/common/style/vars.scss
+++ b/src/common/style/vars.scss
@@ -19,6 +19,8 @@ $start-tools-bar-height: 48px;
 $start-menu-width: 600px;
 $start-menu-height: 550px;
 
+$view-border-color: #555;
+
 :export {
   startToolsBarHeight: $start-tools-bar-height
 }
diff --git a/src/components/View/index.module.scss b/src/components/View/index.module.scss
new file mode 100644
index 0000000..359da65
--- /dev/null
+++ b/src/components/View/index.module.scss
@@ -0,0 +1,40 @@
+.viewBox {
+  position: relative;
+}
+
+.viewBoxBorder {
+  border: 1px solid $view-border-color;
+}
+
+.viewBoxMargin {
+  margin: 24px;
+}
+
+.viewBoxPadding {
+  padding: 24px;
+}
+
+.viewBoxRadius {
+  border-radius: 8px;
+}
+
+.breadcrumbBox {
+  position: absolute;
+  top: 4px;
+  left: 12px;
+}
+
+.breadcrumb {
+  display: block;
+}
+
+.breadcrumbItem {
+  color: #777;
+  user-select: none;
+}
+
+.breadcrumbItemHover {
+  &:hover {
+    color: #eee;
+  }
+}
diff --git a/src/components/View/index.tsx b/src/components/View/index.tsx
new file mode 100644
index 0000000..0b54ab1
--- /dev/null
+++ b/src/components/View/index.tsx
@@ -0,0 +1,70 @@
+import React from 'react'
+import { Breadcrumb } from 'antd'
+import { Link } from 'react-router-dom'
+import classnames from 'classnames'
+import styles from './index.module.scss'
+
+interface BreadcrumbData {
+  path?: string
+  name: string
+}
+
+interface Props {
+  children?: React.ReactNode
+  breadcrumb?: BreadcrumbData[]
+  style?: React.CSSProperties
+  border?: boolean
+  margin?: boolean
+  padding?: boolean
+  radius?: boolean
+}
+
+const View: React.FC<Props> = ({
+  children,
+  breadcrumb,
+  style,
+  border = false,
+  margin = true,
+  padding = true,
+  radius = true
+}) => {
+  return (
+    <div
+      className={classnames(styles.viewBox, {
+        [styles.viewBoxBorder]: border,
+        [styles.viewBoxMargin]: margin,
+        [styles.viewBoxPadding]: padding,
+        [styles.viewBoxRadius]: radius
+      })}
+      style={style}>
+      {breadcrumb && (
+        <div className={styles.breadcrumbBox}>
+          <Breadcrumb className={styles.breadcrumb}>
+            {breadcrumb.map((row, index) => {
+              const item = (
+                <span
+                  className={classnames(styles.breadcrumbItem, {
+                    [styles.breadcrumbItemHover]:
+                      (breadcrumb as BreadcrumbData[]).length !== index + 1
+                  })}>
+                  {row.name}
+                </span>
+              )
+              const breadcrumbItem = row.path ? (
+                <Link to={row.path}>{item}</Link>
+              ) : (
+                <>{item}</>
+              )
+              return (
+                <Breadcrumb.Item key={index}>{breadcrumbItem}</Breadcrumb.Item>
+              )
+            })}
+          </Breadcrumb>
+        </div>
+      )}
+      {children}
+    </div>
+  )
+}
+
+export default View
diff --git a/src/pages/apps/management/user/userinfo/index.tsx b/src/pages/apps/management/user/userinfo/index.tsx
index 2828863..39253fd 100644
--- a/src/pages/apps/management/user/userinfo/index.tsx
+++ b/src/pages/apps/management/user/userinfo/index.tsx
@@ -1,9 +1,14 @@
 import React from 'react'
+import View from '@/components/View'
 
 const Userinfo: React.FC = () => {
   return (
     <div>
-      <div>asd</div>
+      <View
+        border
+        breadcrumb={[{ name: '中文', path: '/' }, { name: '个人中心' }]}>
+        info
+      </View>
       <div>content</div>
     </div>
   )
-- 
Gitee


From aad6b5f57677d5626229ea59568902083674717c Mon Sep 17 00:00:00 2001
From: qiqixiong <1016160938@qq.com>
Date: Mon, 10 Oct 2022 15:43:34 +0800
Subject: [PATCH 2/3] =?UTF-8?q?view=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             | 96 +++++++++----------
 src/components/View/index.module.scss         | 69 ++++++++++++-
 src/components/View/index.tsx                 | 29 ++++++
 src/index.scss                                |  2 +-
 .../apps/management/user/userinfo/index.tsx   | 19 +++-
 src/pages/desktop/Desk/Apps/index.module.scss |  2 +
 6 files changed, 163 insertions(+), 54 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a06cf77..0190bdd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1573,7 +1573,7 @@
     },
     "@eslint/eslintrc": {
       "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.2.tgz",
+      "resolved": "https://registry.npmmirror.com/@eslint/eslintrc/-/eslintrc-1.3.2.tgz",
       "integrity": "sha512-AXYd23w1S/bv3fTs3Lz0vjiYemS08jWkI3hYyS9I1ry+0f+Yjs1wm+sU0BS8qDOPrBIkp4qHYC16I8uVtpLajQ==",
       "dev": true,
       "requires": {
@@ -1590,13 +1590,13 @@
       "dependencies": {
         "argparse": {
           "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "resolved": "https://registry.npmmirror.com/argparse/-/argparse-2.0.1.tgz",
           "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
           "dev": true
         },
         "globals": {
           "version": "13.17.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-13.17.0.tgz",
+          "resolved": "https://registry.npmmirror.com/globals/-/globals-13.17.0.tgz",
           "integrity": "sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==",
           "dev": true,
           "requires": {
@@ -1605,7 +1605,7 @@
         },
         "js-yaml": {
           "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+          "resolved": "https://registry.npmmirror.com/js-yaml/-/js-yaml-4.1.0.tgz",
           "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
           "dev": true,
           "requires": {
@@ -1622,7 +1622,7 @@
     },
     "@humanwhocodes/config-array": {
       "version": "0.10.5",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.5.tgz",
+      "resolved": "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.10.5.tgz",
       "integrity": "sha512-XVVDtp+dVvRxMoxSiSfasYaG02VEe1qH5cKgMQJWhol6HwzbcqoCMJi8dAGoYAO57jhUyhI6cWuRiTcRaDaYug==",
       "dev": true,
       "requires": {
@@ -1633,19 +1633,19 @@
     },
     "@humanwhocodes/gitignore-to-minimatch": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/gitignore-to-minimatch/-/gitignore-to-minimatch-1.0.2.tgz",
+      "resolved": "https://registry.npmmirror.com/@humanwhocodes/gitignore-to-minimatch/-/gitignore-to-minimatch-1.0.2.tgz",
       "integrity": "sha512-rSqmMJDdLFUsyxR6FMtD00nfQKKLFb1kv+qBbOVKqErvloEIJLo5bDTJTQNTYgeyp78JsA7u/NPi5jT1GR/MuA==",
       "dev": true
     },
     "@humanwhocodes/module-importer": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "resolved": "https://registry.npmmirror.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
       "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
       "dev": true
     },
     "@humanwhocodes/object-schema": {
       "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
+      "resolved": "https://registry.npmmirror.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
@@ -2844,7 +2844,7 @@
     },
     "@types/express": {
       "version": "4.17.14",
-      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.14.tgz",
+      "resolved": "https://registry.npmmirror.com/@types/express/-/express-4.17.14.tgz",
       "integrity": "sha512-TEbt+vaPFQ+xpxFLFssxUDXj5cWCxZJjIcB7Yg0k0GMHGtgtQgpvx/MUQUeAkNbA9AAGrwkAsoeItdTgS7FMyg==",
       "dev": true,
       "requires": {
@@ -3123,7 +3123,7 @@
     },
     "@typescript-eslint/eslint-plugin": {
       "version": "5.38.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.38.0.tgz",
+      "resolved": "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.38.0.tgz",
       "integrity": "sha512-GgHi/GNuUbTOeoJiEANi0oI6fF3gBQc3bGFYj40nnAPCbhrtEDf2rjBmefFadweBmO1Du1YovHeDP2h5JLhtTQ==",
       "dev": true,
       "requires": {
@@ -3148,7 +3148,7 @@
     },
     "@typescript-eslint/parser": {
       "version": "5.38.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.38.0.tgz",
+      "resolved": "https://registry.npmmirror.com/@typescript-eslint/parser/-/parser-5.38.0.tgz",
       "integrity": "sha512-/F63giJGLDr0ms1Cr8utDAxP2SPiglaD6V+pCOcG35P2jCqdfR7uuEhz1GIC3oy4hkUF8xA1XSXmd9hOh/a5EA==",
       "dev": true,
       "requires": {
@@ -3437,7 +3437,7 @@
     },
     "acorn-jsx": {
       "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "resolved": "https://registry.npmmirror.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
       "dev": true
     },
@@ -4182,7 +4182,7 @@
     },
     "body-parser": {
       "version": "1.20.0",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.0.tgz",
+      "resolved": "https://registry.npmmirror.com/body-parser/-/body-parser-1.20.0.tgz",
       "integrity": "sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg==",
       "dev": true,
       "requires": {
@@ -5463,7 +5463,7 @@
     },
     "doctrine": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/doctrine/-/doctrine-3.0.0.tgz",
       "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
       "dev": true,
       "requires": {
@@ -5925,7 +5925,7 @@
       "dependencies": {
         "ansi-styles": {
           "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
           "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
           "dev": true,
           "requires": {
@@ -5934,13 +5934,13 @@
         },
         "argparse": {
           "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "resolved": "https://registry.npmmirror.com/argparse/-/argparse-2.0.1.tgz",
           "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
           "dev": true
         },
         "chalk": {
           "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
           "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
           "dev": true,
           "requires": {
@@ -5950,7 +5950,7 @@
         },
         "color-convert": {
           "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
           "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
           "dev": true,
           "requires": {
@@ -5959,13 +5959,13 @@
         },
         "color-name": {
           "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
           "dev": true
         },
         "escape-string-regexp": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
           "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
           "dev": true
         },
@@ -5996,7 +5996,7 @@
         },
         "globals": {
           "version": "13.17.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-13.17.0.tgz",
+          "resolved": "https://registry.npmmirror.com/globals/-/globals-13.17.0.tgz",
           "integrity": "sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==",
           "dev": true,
           "requires": {
@@ -6005,13 +6005,13 @@
         },
         "has-flag": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
         "js-yaml": {
           "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+          "resolved": "https://registry.npmmirror.com/js-yaml/-/js-yaml-4.1.0.tgz",
           "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
           "dev": true,
           "requires": {
@@ -6020,7 +6020,7 @@
         },
         "supports-color": {
           "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
           "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
           "requires": {
@@ -6031,7 +6031,7 @@
     },
     "eslint-config-prettier": {
       "version": "8.5.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz",
+      "resolved": "https://registry.npmmirror.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz",
       "integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==",
       "dev": true
     },
@@ -6166,7 +6166,7 @@
     },
     "eslint-plugin-jsx-a11y": {
       "version": "6.6.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.6.1.tgz",
+      "resolved": "https://registry.npmmirror.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.6.1.tgz",
       "integrity": "sha512-sXgFVNHiWffBq23uiS/JaP6eVR622DqwB4yTzKvGZGcPq6/yZ3WmOZfuBks/vHWo9GaFOqC2ZK4i6+C35knx7Q==",
       "dev": true,
       "requires": {
@@ -6205,7 +6205,7 @@
     },
     "eslint-plugin-prettier": {
       "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz",
+      "resolved": "https://registry.npmmirror.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz",
       "integrity": "sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==",
       "dev": true,
       "requires": {
@@ -6214,7 +6214,7 @@
     },
     "eslint-plugin-react": {
       "version": "7.31.8",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.31.8.tgz",
+      "resolved": "https://registry.npmmirror.com/eslint-plugin-react/-/eslint-plugin-react-7.31.8.tgz",
       "integrity": "sha512-5lBTZmgQmARLLSYiwI71tiGVTLUuqXantZM6vlSY39OaDSV0M7+32K5DnLkmFrwTe+Ksz0ffuLUC91RUviVZfw==",
       "dev": true,
       "requires": {
@@ -6270,7 +6270,7 @@
     },
     "eslint-plugin-react-hooks": {
       "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
+      "resolved": "https://registry.npmmirror.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
       "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
       "dev": true
     },
@@ -6398,7 +6398,7 @@
     },
     "espree": {
       "version": "9.4.0",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.4.0.tgz",
+      "resolved": "https://registry.npmmirror.com/espree/-/espree-9.4.0.tgz",
       "integrity": "sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==",
       "dev": true,
       "requires": {
@@ -6415,7 +6415,7 @@
     },
     "esquery": {
       "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz",
+      "resolved": "https://registry.npmmirror.com/esquery/-/esquery-1.4.0.tgz",
       "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==",
       "dev": true,
       "requires": {
@@ -6520,7 +6520,7 @@
     },
     "express": {
       "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.18.1.tgz",
+      "resolved": "https://registry.npmmirror.com/express/-/express-4.18.1.tgz",
       "integrity": "sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q==",
       "dev": true,
       "requires": {
@@ -6621,7 +6621,7 @@
     },
     "fast-diff": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+      "resolved": "https://registry.npmmirror.com/fast-diff/-/fast-diff-1.2.0.tgz",
       "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
       "dev": true
     },
@@ -6685,7 +6685,7 @@
     },
     "file-entry-cache": {
       "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "resolved": "https://registry.npmmirror.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
       "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
       "dev": true,
       "requires": {
@@ -6801,7 +6801,7 @@
     },
     "flat-cache": {
       "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
+      "resolved": "https://registry.npmmirror.com/flat-cache/-/flat-cache-3.0.4.tgz",
       "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
       "dev": true,
       "requires": {
@@ -6811,7 +6811,7 @@
     },
     "flatted": {
       "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
+      "resolved": "https://registry.npmmirror.com/flatted/-/flatted-3.2.7.tgz",
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
       "dev": true
     },
@@ -7253,7 +7253,7 @@
     },
     "grapheme-splitter": {
       "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
+      "resolved": "https://registry.npmmirror.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
       "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
       "dev": true
     },
@@ -7578,7 +7578,7 @@
     },
     "http-proxy-middleware": {
       "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz",
+      "resolved": "https://registry.npmmirror.com/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz",
       "integrity": "sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==",
       "dev": true,
       "requires": {
@@ -9702,7 +9702,7 @@
     },
     "js-sdsl": {
       "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.4.tgz",
+      "resolved": "https://registry.npmmirror.com/js-sdsl/-/js-sdsl-4.1.4.tgz",
       "integrity": "sha512-Y2/yD55y5jteOAmY50JbUZYwk3CP3wnLPEZnlR1w9oKhITrBEtAxwuWKebFf8hMrPMgbYwFoWK/lH2sBkErELw==",
       "dev": true
     },
@@ -9789,7 +9789,7 @@
     },
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "resolved": "https://registry.npmmirror.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
@@ -9958,7 +9958,7 @@
     },
     "levn": {
       "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "resolved": "https://registry.npmmirror.com/levn/-/levn-0.4.1.tgz",
       "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
       "dev": true,
       "requires": {
@@ -10023,7 +10023,7 @@
     },
     "lodash.merge": {
       "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "resolved": "https://registry.npmmirror.com/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
@@ -10928,7 +10928,7 @@
     },
     "optionator": {
       "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
+      "resolved": "https://registry.npmmirror.com/optionator/-/optionator-0.9.1.tgz",
       "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
       "dev": true,
       "requires": {
@@ -12031,19 +12031,19 @@
     },
     "prelude-ls": {
       "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "resolved": "https://registry.npmmirror.com/prelude-ls/-/prelude-ls-1.2.1.tgz",
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
       "dev": true
     },
     "prettier": {
       "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
+      "resolved": "https://registry.npmmirror.com/prettier/-/prettier-2.7.1.tgz",
       "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
       "dev": true
     },
     "prettier-linter-helpers": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
       "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
       "dev": true,
       "requires": {
@@ -15021,7 +15021,7 @@
     },
     "type-check": {
       "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "resolved": "https://registry.npmmirror.com/type-check/-/type-check-0.4.0.tgz",
       "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
       "dev": true,
       "requires": {
@@ -15036,7 +15036,7 @@
     },
     "type-fest": {
       "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "resolved": "https://registry.npmmirror.com/type-fest/-/type-fest-0.20.2.tgz",
       "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
       "dev": true
     },
diff --git a/src/components/View/index.module.scss b/src/components/View/index.module.scss
index 359da65..f59ebf7 100644
--- a/src/components/View/index.module.scss
+++ b/src/components/View/index.module.scss
@@ -1,5 +1,14 @@
+$breadcrumb-color: #777;
+$breadcrumb-color-hover: #eee;
+
+$title-color: #fff;
+$sub-title-color: #bbb;
+
+$background: rgba(255, 255, 255, 0.03);
+
 .viewBox {
   position: relative;
+  background: $background;
 }
 
 .viewBoxBorder {
@@ -20,21 +29,75 @@
 
 .breadcrumbBox {
   position: absolute;
-  top: 4px;
+  top: 3px;
   left: 12px;
+  display: flex;
+  width: calc(100% - 12px);
+}
+
+.back {
+  margin-right: 8px;
+  color: $breadcrumb-color;
+  cursor: pointer;
+  svg{
+    font-size: 12px;
+  }
+  &:hover {
+    color: $breadcrumb-color-hover;
+  }
 }
 
 .breadcrumb {
   display: block;
+  flex-grow: 1;
 }
 
 .breadcrumbItem {
-  color: #777;
+  color: $breadcrumb-color;
   user-select: none;
+  font-size: 12px;
 }
 
 .breadcrumbItemHover {
   &:hover {
-    color: #eee;
+    color: $breadcrumb-color-hover;
   }
 }
+
+.header {
+  width: 100%;
+  display: flex;
+}
+
+.titleBox {
+  flex-grow: 1;
+  display: flex;
+}
+
+.title {
+  font-size: 16px;
+  color: $title-color;
+}
+
+.subTitle {
+  font-size: 14px;
+  color: $sub-title-color;
+  line-height: 28px;
+  margin-left: 16px;
+}
+
+.extra {
+  float: right;
+  margin: -10px -10px 0 0;
+}
+
+.footerBox{
+  height: 20px;
+  width: 100%;
+}
+
+.footer {
+  position: absolute;
+  left: 12px;
+  bottom: -16px;
+}
diff --git a/src/components/View/index.tsx b/src/components/View/index.tsx
index 0b54ab1..82e33c1 100644
--- a/src/components/View/index.tsx
+++ b/src/components/View/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { Breadcrumb } from 'antd'
+import { ArrowLeftOutlined } from '@ant-design/icons'
 import { Link } from 'react-router-dom'
 import classnames from 'classnames'
 import styles from './index.module.scss'
@@ -12,6 +13,11 @@ interface BreadcrumbData {
 interface Props {
   children?: React.ReactNode
   breadcrumb?: BreadcrumbData[]
+  back?: { (event: React.MouseEvent): void }
+  extra?: React.ReactNode
+  title?: string
+  subTitle?: string
+  footer?: React.ReactNode
   style?: React.CSSProperties
   border?: boolean
   margin?: boolean
@@ -22,6 +28,11 @@ interface Props {
 const View: React.FC<Props> = ({
   children,
   breadcrumb,
+  back,
+  extra,
+  title,
+  subTitle,
+  footer,
   style,
   border = false,
   margin = true,
@@ -39,6 +50,11 @@ const View: React.FC<Props> = ({
       style={style}>
       {breadcrumb && (
         <div className={styles.breadcrumbBox}>
+          {!!back && (
+            <div className={styles.back} onClick={event => back(event)}>
+              <ArrowLeftOutlined />
+            </div>
+          )}
           <Breadcrumb className={styles.breadcrumb}>
             {breadcrumb.map((row, index) => {
               const item = (
@@ -62,7 +78,20 @@ const View: React.FC<Props> = ({
           </Breadcrumb>
         </div>
       )}
+      <div className={styles.header}>
+        <div className={styles.titleBox}>
+          {title && <div className={styles.title}>{title}</div>}
+          {subTitle && <div className={styles.subTitle}>{subTitle}</div>}
+        </div>
+        {extra && <div className={styles.extra}>{extra}</div>}
+      </div>
       {children}
+      {footer && (
+        <>
+          <div className={styles.footerBox} />
+          <div className={styles.footer}>{footer}</div>
+        </>
+      )}
     </div>
   )
 }
diff --git a/src/index.scss b/src/index.scss
index 09f35f3..205e68d 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -4,7 +4,7 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  font-size: 12px;
+  font-size: 14px;
 }
 
 html {
diff --git a/src/pages/apps/management/user/userinfo/index.tsx b/src/pages/apps/management/user/userinfo/index.tsx
index 39253fd..a505ec6 100644
--- a/src/pages/apps/management/user/userinfo/index.tsx
+++ b/src/pages/apps/management/user/userinfo/index.tsx
@@ -1,15 +1,30 @@
 import React from 'react'
 import View from '@/components/View'
+import { Button, Tabs } from 'antd'
 
 const Userinfo: React.FC = () => {
   return (
     <div>
       <View
         border
-        breadcrumb={[{ name: '中文', path: '/' }, { name: '个人中心' }]}>
+        margin={false}
+        radius={false}
+        breadcrumb={[{ name: '中文', path: '/' }, { name: '个人中心' }]}
+        extra={<Button type="primary">按钮</Button>}
+        back={(e: any) => console.log(e)}
+        title="主标题"
+        subTitle="副标题asd"
+        footer={
+          <Tabs defaultActiveKey="1">
+            <Tabs.TabPane tab="选项一" key="1" />
+            <Tabs.TabPane tab="选项二" key="2" />
+          </Tabs>
+        }>
         info
       </View>
-      <div>content</div>
+      <View border title="标题" extra={<Button type="primary">按钮</Button>}>
+        content
+      </View>
     </div>
   )
 }
diff --git a/src/pages/desktop/Desk/Apps/index.module.scss b/src/pages/desktop/Desk/Apps/index.module.scss
index c6616b5..6e58bb9 100644
--- a/src/pages/desktop/Desk/Apps/index.module.scss
+++ b/src/pages/desktop/Desk/Apps/index.module.scss
@@ -46,4 +46,6 @@ $app-width: 40px;
   font-weight: lighter;
   text-align: center;
   line-height: 15px;
+  font-size: 12px;
+  color: #fff;
 }
-- 
Gitee


From 99a54f6c4ef80ddf7a6ec313201ca764dba31f8a Mon Sep 17 00:00:00 2001
From: qiqixiong <1016160938@qq.com>
Date: Mon, 10 Oct 2022 15:46:59 +0800
Subject: [PATCH 3/3] eslint

---
 src/components/View/index.module.scss         | 18 +++++++++---------
 src/pages/desktop/Desk/Apps/index.module.scss |  4 ++--
 src/pages/desktop/Desk/index.tsx              |  4 +---
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/components/View/index.module.scss b/src/components/View/index.module.scss
index f59ebf7..0ab9bbb 100644
--- a/src/components/View/index.module.scss
+++ b/src/components/View/index.module.scss
@@ -1,9 +1,7 @@
 $breadcrumb-color: #777;
 $breadcrumb-color-hover: #eee;
-
 $title-color: #fff;
 $sub-title-color: #bbb;
-
 $background: rgba(255, 255, 255, 0.03);
 
 .viewBox {
@@ -39,9 +37,11 @@ $background: rgba(255, 255, 255, 0.03);
   margin-right: 8px;
   color: $breadcrumb-color;
   cursor: pointer;
-  svg{
+
+  svg {
     font-size: 12px;
   }
+
   &:hover {
     color: $breadcrumb-color-hover;
   }
@@ -53,9 +53,9 @@ $background: rgba(255, 255, 255, 0.03);
 }
 
 .breadcrumbItem {
+  font-size: 12px;
   color: $breadcrumb-color;
   user-select: none;
-  font-size: 12px;
 }
 
 .breadcrumbItemHover {
@@ -65,8 +65,8 @@ $background: rgba(255, 255, 255, 0.03);
 }
 
 .header {
-  width: 100%;
   display: flex;
+  width: 100%;
 }
 
 .titleBox {
@@ -80,10 +80,10 @@ $background: rgba(255, 255, 255, 0.03);
 }
 
 .subTitle {
+  margin-left: 16px;
   font-size: 14px;
   color: $sub-title-color;
   line-height: 28px;
-  margin-left: 16px;
 }
 
 .extra {
@@ -91,13 +91,13 @@ $background: rgba(255, 255, 255, 0.03);
   margin: -10px -10px 0 0;
 }
 
-.footerBox{
-  height: 20px;
+.footerBox {
   width: 100%;
+  height: 20px;
 }
 
 .footer {
   position: absolute;
-  left: 12px;
   bottom: -16px;
+  left: 12px;
 }
diff --git a/src/pages/desktop/Desk/Apps/index.module.scss b/src/pages/desktop/Desk/Apps/index.module.scss
index 6e58bb9..98e4a09 100644
--- a/src/pages/desktop/Desk/Apps/index.module.scss
+++ b/src/pages/desktop/Desk/Apps/index.module.scss
@@ -43,9 +43,9 @@ $app-width: 40px;
   overflow: hidden;
   padding-bottom: 4px;
   height: 34px;
+  font-size: 12px;
   font-weight: lighter;
   text-align: center;
-  line-height: 15px;
-  font-size: 12px;
   color: #fff;
+  line-height: 15px;
 }
diff --git a/src/pages/desktop/Desk/index.tsx b/src/pages/desktop/Desk/index.tsx
index 950d38a..d2b020c 100644
--- a/src/pages/desktop/Desk/index.tsx
+++ b/src/pages/desktop/Desk/index.tsx
@@ -5,9 +5,7 @@ import Apps from './Apps'
 import useStore, { MyState } from '@/store'
 import { getUserInfo } from '@/common/service/user'
 
-interface Props {}
-
-const Desk: React.FC<Props> = props => {
+const Desk: React.FC = () => {
   const setAppList = useStore((state: MyState) => state.setAppList)
   const setStartMenuList = useStore((state: MyState) => state.setStartMenuList)
   const setUserInfo = useStore((state: MyState) => state.setUserInfo)
-- 
Gitee