feat: 添加默认布局

2024-04-20 02:16:25 +08:00
parent 5889fe1b2f
commit f2b1aa6578
16 changed files with 1506 additions and 5 deletions
--- a/.env.development
+++ b/.env.development
@@ -10,4 +10,4 @@ VITE_APP_TITLE=开发环境
 # 网络请求公用地址
 VITE_API_BASE_URL='http://127.0.0.1:3000'

-VITE_TITLE_NAME='五味子云相册'
+VITE_TITLE_NAME='五味子云存储'
--- a/.env.production
+++ b/.env.production
@@ -9,4 +9,4 @@ VITE_APP_TITLE=生产环境
 # 网络请求公用地址
 VITE_API_BASE_URL=''

-VITE_TITLE_NAME='五味子云相册'
+VITE_TITLE_NAME='五味子云存储'
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
    "antd": "^5.16.1",
    "axios": "^1.6.8",
    "crypto-js": "^4.2.0",
+    "gsap": "^3.12.5",
    "mobx": "^6.12.3",
    "mobx-persist-store": "^1.1.4",
    "mobx-react": "^9.1.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,9 @@ dependencies:
  crypto-js:
    specifier: ^4.2.0
    version: 4.2.0
+  gsap:
+    specifier: ^3.12.5
+    version: 3.12.5
  mobx:
    specifier: ^6.12.3
    version: 6.12.3
@@ -3731,6 +3734,10 @@ packages:
    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
    dev: true

+  /gsap@3.12.5:
+    resolution: {integrity: sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==}
+    dev: false
+
  /has-ansi@2.0.0:
    resolution: {integrity: sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==}
    engines: {node: '>=0.10.0'}
--- a/src/components/BlurCard/fonts.less
+++ b/src/components/BlurCard/fonts.less
@@ -0,0 +1,18 @@
+/* latin-ext */
+@font-face {
+	font-family: 'Bebas Neue';
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url(https://fonts.gstatic.com/s/bebasneue/v14/JTUSjIg69CK48gW7PXoo9Wdhyzbi.woff2) format('woff2');
+	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+	font-family: 'Bebas Neue';
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url(https://fonts.gstatic.com/s/bebasneue/v14/JTUSjIg69CK48gW7PXoo9Wlhyw.woff2) format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
--- a/src/components/BlurCard/index.less
+++ b/src/components/BlurCard/index.less
@@ -0,0 +1,179 @@
+//@import url('./fonts.less');
+
+*,
+*:after,
+*:before {
+	box-sizing: border-box;
+}
+
+html {
+	color-scheme: light only;
+}
+
+body {
+	display: flex;
+	place-items: center;
+	justify-content: center;
+	min-height: 100vh;
+	touch-action: none;
+	font-family:  "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
+	padding: 1rem;
+	background-image: url("@/assets/images/background.png");
+}
+
+body::before {
+	--line: color-mix(in lch, canvasText 25%, transparent);
+	--size: 60px;
+	content: "";
+	height: 100vh;
+	width: 100vw;
+	position: fixed;
+	background:
+		linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) 0 -5vmin / var(--size) var(--size),
+		linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0 -5vmin / var(--size) var(--size);
+	//-webkit-mask: linear-gradient(-15deg, transparent 60%, white);
+	mask: linear-gradient(-15deg, transparent 60%, white);
+	top: 0;
+	z-index: -1;
+}
+
+article {
+	width: 600px;
+	aspect-ratio: 2 / 1.1;
+	min-height: 330px;
+	position: relative;
+	overflow: hidden;
+	border-radius: 4em;
+	max-width: calc(100% - 2rem);
+	background: hsl(0 0% 50%);
+}
+
+article > img {
+	position: absolute;
+	top: 0;
+	left: 50%;
+	translate: -50% 0;
+	height: 100%;
+	width: 660px;
+	-o-object-fit: cover;
+	object-fit: cover;
+	-o-object-position: center 43%;
+	object-position: center 43%;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	pointer-events: none;
+}
+
+:root {
+	--x: 0;
+	--y: 0;
+}
+
+article > img:first-of-type {
+	filter: saturate(1.5) brightness(0.9);
+	-o-object-position: calc(-50% + (var(--x) * 30px)) calc(43% + (var(--y) * -20px));
+	object-position: calc(-50% + (var(--x) * 30px)) calc(43% + (var(--y) * -20px));
+}
+
+article > img:last-of-type {
+	-o-object-position: calc(-50% + (var(--x) * 40px)) calc(43% + (var(--y) * -40px));
+	object-position: calc(-50% + (var(--x) * 40px)) calc(43% + (var(--y) * -40px));
+}
+
+article h3 {
+	position: absolute;
+	left: 50%;
+	top: 6%;
+	margin: 0;
+	font-size: 8rem;
+	translate: -50% 0;
+	text-transform: uppercase;
+	font-family: 'Bebas Neue', sans-serif;
+	color: white;
+	translate: calc(-50% + (var(--x) * -30px)) calc(var(--y) * -20px);
+}
+
+.content {
+	min-height: 32%;
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	color: white;
+	display: grid;
+	gap: 0.2rem;
+	place-items: center;
+	align-content: center;
+	padding-bottom: .5rem;
+}
+
+.content svg {
+	width: 20px;
+}
+
+.content p {
+	margin: 0;
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	font-size: 1.2rem;
+}
+
+.content p:first-of-type::after {
+	content: "";
+	position: absolute;
+	top: 1rem;
+	left: 50%;
+	width: 6ch;
+	background: white;
+	height: 1px;
+	translate: -50% 0;
+}
+
+.content p:last-of-type {
+	opacity: 0.8;
+}
+
+/* Blurring */
+.blur {
+	position: absolute;
+	inset: 60% 0 -26% 0;
+	filter: blur(20px);
+	overflow: hidden;
+}
+
+.blur img {
+	-o-object-position: calc(-50% + (var(--x) * 40px)) calc(47.5% + (var(--y) * -40px));
+	object-position: calc(-50% + (var(--x) * 40px)) calc(47.5% + (var(--y) * -40px));
+	-o-object-fit: cover;
+	object-fit: cover;
+	left: 50%;
+	translate: -50% 0;
+	height: 330px;
+	position: absolute;
+	bottom: 25%;
+	width: 660px;
+	//-webkit-mask: radial-gradient(50% 100% at 50% 90%, white 50%, transparent);
+	mask: radial-gradient(50% 100% at 50% 90%, white 50%, transparent);
+	filter: saturate(1.5) brightness(0.8);
+}
+//
+//.bear-link {
+//	color: canvasText;
+//	position: fixed;
+//	top: 1rem;
+//	left: 1rem;
+//	width: 48px;
+//	aspect-ratio: 1;
+//	display: grid;
+//	place-items: center;
+//	opacity: 0.8;
+//}
+
+:where(.x-link, .bear-link):is(:hover, :focus-visible) {
+	opacity: 1;
+}
+.bear-link svg {
+	width: 75%;
+}
--- a/src/components/BlurCard/index.tsx
+++ b/src/components/BlurCard/index.tsx
@@ -0,0 +1,47 @@
+import React, { useEffect } from 'react'
+import './index.less'
+import { gsap } from 'gsap'
+const BlurCard: React.FC = () => {
+    useEffect(() => {
+        const UPDATE = ({ x, y}) => {
+            gsap.set(document.documentElement, {
+                '--x': gsap.utils.mapRange(0, window.innerWidth, -1, 1, x),
+                '--y': gsap.utils.mapRange(0, window.innerHeight, -1, 1, y),
+            })
+        }
+
+        window.addEventListener('pointermove', UPDATE)
+    }, [])
+    return (
+        <>
+            <article>
+                <img src='https://assets.codepen.io/605876/osaka-sky.jpeg' alt='' />
+                <h3>Osaka</h3>
+                <img src='https://assets.codepen.io/605876/osaka-tower.png' alt='' />
+                <div className='blur'>
+                    <img src='https://assets.codepen.io/605876/osaka.jpeg' alt='' />
+                    <div></div>
+                    --&gt;
+                </div>
+                <div className='content'>
+                    <p>
+                        <svg
+                            xmlns='http://www.w3.org/2000/svg'
+                            viewBox='0 0 24 24'
+                            fill='currentColor'
+                            className='w-6 h-6'>
+                            <path d='M15.75 8.25a.75.75 0 0 1 .75.75c0 1.12-.492 2.126-1.27 2.812a.75.75 0 1 1-.992-1.124A2.243 2.243 0 0 0 15 9a.75.75 0 0 1 .75-.75Z'></path>
+                            <path
+                                fillRule='evenodd'
+                                d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM4.575 15.6a8.25 8.25 0 0 0 9.348 4.425 1.966 1.966 0 0 0-1.84-1.275.983.983 0 0 1-.97-.822l-.073-.437c-.094-.565.25-1.11.8-1.267l.99-.282c.427-.123.783-.418.982-.816l.036-.073a1.453 1.453 0 0 1 2.328-.377L16.5 15h.628a2.25 2.25 0 0 1 1.983 1.186 8.25 8.25 0 0 0-6.345-12.4c.044.262.18.503.389.676l1.068.89c.442.369.535 1.01.216 1.49l-.51.766a2.25 2.25 0 0 1-1.161.886l-.143.048a1.107 1.107 0 0 0-.57 1.664c.369.555.169 1.307-.427 1.605L9 13.125l.423 1.059a.956.956 0 0 1-1.652.928l-.679-.906a1.125 1.125 0 0 0-1.906.172L4.575 15.6Z'
+                                clipRule='evenodd'></path>
+                        </svg>
+                        <span>Osaka Castle</span>
+                    </p>
+                    <p>Osaka, China</p>
+                </div>
+            </article>
+        </>
+    )
+}
+export default BlurCard
--- a/src/layout/default/index.less
+++ b/src/layout/default/index.less
@@ -0,0 +1,705 @@
+* {
+	box-sizing: border-box;
+}
+
+html {
+	scroll-behavior: smooth;
+}
+
+html, body {
+	width: 100%;
+	height: 100vh;
+	margin: 0;
+}
+
+body {
+	font-family: "DM Sans", sans-serif;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	//overflow: hidden;
+	//overflow-x: hidden;
+	background-image: url("@/assets/images/background.png");
+	background-position: center;
+	background-size: cover;
+	padding: 20px;
+}
+
+:root {
+	--dark-font: #0f0f10;
+	--light-font: #79798c;
+}
+
+a {
+	text-decoration: none;
+	cursor: pointer;
+}
+h1,p{
+	color: #0f0f10;
+}
+.app-container {
+	position: relative;
+	border-radius: 10px;
+	width: 100vw;
+	height: 100vh;
+	max-width: 1500px;
+	max-height: 670px;
+	background: linear-gradient(180deg, #e0e9fd 0%, #e9ecf1 90%);
+	box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4);
+	display: flex;
+	overflow: hidden;
+}
+
+.left-area {
+	padding: 32px;
+	//flex-basis: 1 0 132px;
+	background-color: rgba(255, 255, 255, 0.9);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	transition: all 300ms cubic-bezier(0.19, 1, 0.56, 1);
+	position: relative;
+	overflow: auto;
+}
+.left-area.show {
+	transform: translateX(0);
+	opacity: 1;
+}
+
+.app-name {
+	font-weight: 700;
+	font-size: 16px;
+	line-height: 24px;
+	color: var(--dark-font);
+	margin-bottom: 32px;
+}
+
+.item-link {
+	color: var(--light-font);
+	margin-bottom: 32px;
+	transition: 0.2s;
+}
+.item-link.active {
+	color: var(--dark-font);
+}
+
+.btn-logout {
+	border: none;
+	background-color: transparent;
+	color: var(--light-font);
+	margin-top: auto;
+	cursor: pointer;
+	transition: 0.2s;
+}
+.btn-logout:hover {
+	color: var(--dark-font);
+}
+
+.main-area {
+	flex: 1;
+	height: 100%;
+	overflow-y: auto;
+	background: linear-gradient(97deg, #f2f7fd 0%, #f0f4fd 90%);
+	border-radius: 0 10px 10px 0;
+	padding-bottom: 24px;
+	position: relative;
+}
+
+.main-area-header {
+	padding: 24px 40px;
+	background: linear-gradient(97deg, #f2f7fd 0%, #f0f4fd 90%);
+}
+
+.search-wrapper {
+	border-radius: 4px;
+	background-color: #fff;
+	padding-right: 12px;
+	height: 40px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	color: var(--light-font);
+	box-shadow: 0 2px 6px 0 rgba(136, 148, 171, 0.2), 0 24px 20px -24px rgba(71, 82, 107, 0.1);
+	overflow: hidden;
+}
+
+.search-input {
+	border: none;
+	flex: 1;
+	outline: none;
+	height: 100%;
+	padding: 0 12px;
+	font-size: 12px;
+	background-color: white;
+}
+
+.right-area {
+	flex-basis: 300px;
+	flex-grow: 0;
+	background: linear-gradient(180deg, #e0e9fd 0%, #e9ecf1 90%);
+	transition: all 300ms cubic-bezier(0.19, 1, 0.56, 1);
+}
+.right-area.show {
+	transform: translateX(0);
+	width: 100%;
+	opacity: 1;
+}
+
+.content-section {
+	display: block;
+	margin-top: 32px;
+	overflow-x: hidden;
+	padding: 0 40px;
+}
+
+.section-header {
+	font-size: 24px;
+	line-height: 32px;
+	margin-bottom: 16px;
+}
+.section-header-wrapper {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+.section-header-link {
+	display: block;
+	font-size: 12px;
+	line-height: 16px;
+	color: #8683d6;
+}
+
+.access-links {
+	display: flex;
+	justify-content: space-between;
+	flex-wrap: wrap;
+	margin: 0 -8px;
+}
+
+.access-icon {
+	width: 100%;
+	height: 100%;
+	border-radius: 12px;
+	padding: 20px;
+	color: #fff;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.access-icon svg {
+	width: 36px;
+	height: 36px;
+}
+
+.access-link-wrapper {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	padding: 8px;
+}
+.access-link-wrapper:nth-child(1) .access-icon {
+	background-color: #6166fe;
+}
+.access-link-wrapper:nth-child(2) .access-icon {
+	background-color: #6166fe;
+}
+.access-link-wrapper:nth-child(3) .access-icon {
+	background-color: #3275f7;
+}
+.access-link-wrapper:nth-child(4) .access-icon {
+	background-color: #3275f7;
+}
+.access-link-wrapper:nth-child(5) .access-icon {
+	background-color: #22244a;
+}
+.access-link-wrapper:nth-child(6) .access-icon {
+	background-color: #22244a;
+}
+
+.access-text {
+	color: var(--light-font);
+	font-size: 12px;
+	line-height: 24px;
+}
+
+.content-section-line,
+.content-part-line {
+	display: flex;
+	justify-content: space-between;
+}
+
+.content-part-line {
+	height: 100%;
+}
+
+.content-section-line {
+	margin: 0 -8px;
+}
+
+.section-part {
+	flex-basis: 49%;
+}
+
+.image-wrapper {
+	border-radius: 12px;
+	overflow: hidden;
+	width: 100%;
+	height: auto;
+	position: relative;
+	flex-basis: 48%;
+	display: flex;
+}
+.image-wrapper img {
+	width: 100%;
+	height: 100%;
+	-o-object-fit: cover;
+	object-fit: cover;
+	transition: 0.2s ease-in;
+}
+.image-wrapper:hover img {
+	transform: scale(1.125);
+}
+
+.image-overlay {
+	position: absolute;
+	z-index: 1;
+	width: 100%;
+	height: 100%;
+	background: linear-gradient(0deg, rgba(0, 16, 34, 0.8) 0%, rgba(240, 244, 253, 0.2) 90%);
+	padding: 12px;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	justify-content: flex-end;
+}
+
+.video-info-text {
+	width: calc(100% - 40px);
+}
+.video-info-text p {
+	margin: 0;
+}
+
+.video-name, .video-subtext {
+	color: #fff;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.video-name.medium, .video-subtext.medium {
+	font-size: 14px;
+	line-height: 24px;
+}
+.video-name.tiny, .video-subtext.tiny {
+	font-size: 12px;
+	line-height: 16px;
+}
+
+.video-info {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+}
+
+.video-subtext {
+	opacity: 0.8;
+}
+
+.files-table {
+	background-color: #fff;
+	box-shadow: 0 2px 6px 0 rgba(136, 148, 171, 0.2), 0 24px 20px -24px rgba(71, 82, 107, 0.1);
+	border-radius: 12px;
+	padding: 12px;
+	display: table;
+	table-layout: auto;
+	width: 100%;
+}
+.files-table-header {
+	display: table-header-group;
+}
+.files-table-row {
+	display: table-row-group;
+}
+
+.table-cell {
+	display: table-cell;
+	font-size: 12px;
+	line-height: 16px;
+	color: #000;
+	padding: 8px;
+}
+
+.column-header {
+	font-size: 12px;
+	line-height: 16px;
+	color: #888da9;
+}
+
+.name-cell {
+	width: 40%;
+	word-break: break-all;
+}
+.name-cell.pdf:before {
+	content: "PDF";
+	background-color: #e2e9f8;
+	color: #5a8ff7;
+}
+.name-cell.jpg:before {
+	content: "JPG";
+	background-color: #e4e2f1;
+	color: #302d7d;
+}
+.name-cell:before {
+	border-radius: 4px;
+	font-size: 8px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 4px;
+	display: inline-block;
+	vertical-align: middle;
+	margin-right: 4px;
+}
+
+.size-cell {
+	width: 20%;
+}
+
+.more-action {
+	border: none;
+	background-color: transparent;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23888da9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-more-horizontal' viewBox='0 0 24 24'%3E%3Cdefs/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E");
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: contain;
+	width: 24px;
+	height: 16px;
+	outline: none;
+	cursor: pointer;
+}
+
+.fixed.main-area-header {
+	position: sticky;
+	z-index: 2;
+	top: 0;
+	width: 100%;
+	padding: 12px 40px;
+	transition: 0.2s;
+	-webkit-animation: sticky 0.5s forwards;
+	animation: sticky 0.5s forwards;
+}
+
+@-webkit-keyframes sticky {
+	0% {
+		transform: translatey(-88px);
+	}
+	100% {
+		transform: translatey(0px);
+	}
+}
+
+@keyframes sticky {
+	0% {
+		transform: translatey(-88px);
+	}
+	100% {
+		transform: translatey(0px);
+	}
+}
+.video-time {
+	position: absolute;
+	z-index: 1;
+	border-radius: 10px;
+	padding: 4px 12px;
+	background-color: rgba(139, 156, 163, 0.5);
+	font-size: 10px;
+	right: 12px;
+	top: 12px;
+	color: #fff;
+}
+
+.btn-play {
+	border-radius: 50%;
+	background-color: #fff;
+	border: none;
+	box-shadow: 0 2px 6px 0 rgba(136, 148, 171, 0.2), 0 24px 20px -24px rgba(71, 82, 107, 0.1);
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%2322244a' stroke='%2322244a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-play'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E");
+	background-position: center;
+	background-repeat: no-repeat;
+	width: 40px;
+	height: 40px;
+	flex-shrink: 0;
+}
+
+.right-area {
+	padding: 24px;
+	overflow: auto;
+}
+
+.right-area-header-wrapper {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+.right-area-header-wrapper .more-action {
+	width: 24px;
+	height: 24px;
+}
+
+.download-item-line {
+	padding: 12px 0;
+}
+
+.line-header {
+	font-size: 12px;
+	line-height: 16px;
+	color: #888da9;
+}
+
+.download-area {
+	background-color: #eceffb;
+	border-radius: 12px;
+	padding: 8px;
+	display: flex;
+	align-items: center;
+	margin-top: 12px;
+	cursor: pointer;
+}
+
+.download-item-texts {
+	padding: 0 12px;
+}
+.download-item-texts p {
+	line-height: 16px;
+	margin: 0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	width: 150px;
+}
+
+.download-text-header {
+	font-size: 12px;
+}
+
+.download-text-info {
+	color: #888da9;
+	font-size: 10px;
+}
+.download-text-info span {
+	margin-left: 8px;
+}
+
+.download-item-icon {
+	width: 32px;
+}
+
+.download-icon {
+	width: 24px;
+	fill: #4bc3a7;
+}
+
+.progress-bar {
+	height: 4px;
+	width: 100%;
+	overflow: hidden;
+	border-radius: 2px;
+	background-color: #dadff3;
+	margin: 6px 0;
+}
+
+.progress {
+	height: 100%;
+	width: 40%;
+	background-color: #4bc0dd;
+	display: block;
+}
+
+.received-item-line {
+	height: 150px;
+	width: 100%;
+	padding-top: 12px;
+	display: flex;
+	padding-left: 4px;
+}
+
+.progress-line {
+	height: 100%;
+	width: 2px;
+	background-color: #22244a;
+	display: flex;
+	justify-content: space-between;
+	flex-direction: column;
+	position: relative;
+}
+.progress-line:before, .progress-line:after {
+	content: "";
+	position: absolute;
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	background-color: #22244a;
+	transform: translateX(-50%);
+	left: 50%;
+}
+.progress-line:after {
+	bottom: 0;
+}
+
+.time {
+	margin-left: 12px;
+	font-size: 10px;
+	color: #888da9;
+}
+
+.received-items-content {
+	padding: 24px 10px;
+}
+
+.received-files {
+	display: flex;
+	height: 70%;
+}
+.received-files .image-wrapper {
+	margin-left: 6px;
+	display: flex;
+}
+
+.received-files-info {
+	font-size: 12px;
+	line-height: 16px;
+	margin-left: 12px;
+	margin-top: 12px;
+}
+.received-files-info span {
+	color: #7a8dc5;
+}
+
+.btn-show-left-area,
+.btn-show-right-area {
+	position: absolute;
+	top: 24px;
+	width: 32px;
+	height: 40px;
+	border-radius: 4px;
+	background-color: #fff;
+	border: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	outline: none;
+	cursor: pointer;
+	display: none;
+}
+
+.btn-show-left-area {
+	left: 0;
+	border-radius: 0 4px 4px 0;
+}
+
+.btn-show-right-area {
+	right: 0;
+	border-radius: 4px 0 0 4px;
+}
+
+.btn-close-left,
+.btn-close-right {
+	border: none;
+	background-color: transparent;
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	color: var(--light-font);
+	outline: none;
+	cursor: pointer;
+	display: none;
+}
+
+.show .btn-close-left,
+.show .btn-close-right {
+	display: block;
+}
+
+@media screen and (min-width: 850px) and (max-width: 1042px) {
+	.access-icon {
+		padding: 16px;
+	}
+
+	.access-icon svg {
+		width: 20px;
+		height: 20px;
+	}
+}
+@media screen and (max-width: 900px) {
+	.right-area {
+		transform: translateX(100%);
+		position: absolute;
+		opacity: 0;
+		z-index: 2;
+		height: 100%;
+		box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4);
+	}
+
+	.btn-show-right-area {
+		display: flex;
+	}
+
+	.access-icon svg {
+		width: 36px;
+		height: 36px;
+	}
+}
+@media screen and (max-width: 768px) {
+	.left-area {
+		transform: translateX(-100%);
+		opacity: 0;
+		position: absolute;
+		z-index: 2;
+		height: 100%;
+		background-color: #fff;
+		background-image: none;
+		box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4);
+	}
+
+	.btn-show-left-area {
+		display: flex;
+	}
+
+	.content-section-line,
+	.content-part-line {
+		flex-direction: column;
+	}
+
+	.image-wrapper {
+		margin: 10px 0;
+	}
+
+	.video-name.tiny, .video-subtext.tiny {
+		font-size: 16px;
+		line-height: 24px;
+	}
+
+	.access-link-wrapper {
+		width: 33.3%;
+	}
+}
+@media screen and (max-width: 520px) {
+	body {
+		padding: 0;
+	}
+
+	.app-container {
+		border-radius: 0;
+	}
+
+	.content-section {
+		padding: 0 20px;
+	}
+
+	.content-section-line {
+		margin: 0;
+	}
+}
+
--- a/src/layout/default/index.tsx
+++ b/src/layout/default/index.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import LeftArea from '@/layout/default/left-area'
+import MainArea from '@/layout/default/main-area'
+import RightArea from '@/layout/default/right-area'
+import './index.less'
+const DefaultLayOut: React.FC = () => {
+    return (
+        <>
+            <div className='app-container'>
+                <LeftArea />
+                <MainArea />
+                <RightArea />
+            </div>
+        </>
+    )
+}
+export default DefaultLayOut
--- a/src/layout/default/left-area/index.tsx
+++ b/src/layout/default/left-area/index.tsx
@@ -0,0 +1,110 @@
+import React from 'react'
+
+const LeftArea: React.FC = () => {
+    return (
+        <>
+            <div className='left-area'>
+                <button className='btn-close-left'>
+                    <svg
+                        xmlns='http://www.w3.org/2000/svg'
+                        width='24'
+                        height='24'
+                        fill='none'
+                        stroke='currentColor'
+                        strokeLinecap='round'
+                        strokeLinejoin='round'
+                        strokeWidth='2'
+                        className='feather feather-x-circle'
+                        viewBox='0 0 24 24'>
+                        <defs></defs>
+                        <circle cx='12' cy='12' r='10'></circle>
+                        <path d='M15 9l-6 6M9 9l6 6'></path>
+                    </svg>
+                </button>
+                <div className='app-name'>MyDocs</div>
+                <a href='#' className='item-link active' id='pageLink'>
+                    <svg
+                        xmlns='http://www.w3.org/2000/svg'
+                        width='24'
+                        height='24'
+                        fill='none'
+                        stroke='currentColor'
+                        strokeLinecap='round'
+                        strokeLinejoin='round'
+                        strokeWidth='2'
+                        className='feather feather-grid'
+                        viewBox='0 0 24 24'>
+                        <defs></defs>
+                        <path d='M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z'></path>
+                    </svg>
+                </a>
+                <a href='#' className='item-link' id='pageLink'>
+                    <svg
+                        xmlns='http://www.w3.org/2000/svg'
+                        width='24'
+                        height='24'
+                        fill='none'
+                        stroke='currentColor'
+                        strokeLinecap='round'
+                        strokeLinejoin='round'
+                        strokeWidth='2'
+                        className='feather feather-folder'
+                        viewBox='0 0 24 24'>
+                        <defs></defs>
+                        <path d='M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z'></path>
+                    </svg>
+                </a>
+                <a href='#' className='item-link' id='pageLink'>
+                    <svg
+                        xmlns='http://www.w3.org/2000/svg'
+                        width='24'
+                        height='24'
+                        fill='none'
+                        stroke='currentColor'
+                        strokeLinecap='round'
+                        strokeLinejoin='round'
+                        strokeWidth='2'
+                        className='feather feather-hard-drive'
+                        viewBox='0 0 24 24'>
+                        <defs></defs>
+                        <path d='M22 12H2M5.45 5.11L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11zM6 16h.01M10 16h.01'></path>
+                    </svg>
+                </a>
+                <a href='#' className='item-link' id='pageLink'>
+                    <svg
+                        xmlns='http://www.w3.org/2000/svg'
+                        width='24'
+                        height='24'
+                        fill='none'
+                        stroke='currentColor'
+                        strokeLinecap='round'
+                        strokeLinejoin='round'
+                        strokeWidth='2'
+                        className='feather feather-settings'
+                        viewBox='0 0 24 24'>
+                        <defs></defs>
+                        <circle cx='12' cy='12' r='3'></circle>
+                        <path d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z'></path>
+                    </svg>
+                </a>
+                <button className='btn-logout'>
+                    <svg
+                        xmlns='http://www.w3.org/2000/svg'
+                        width='24'
+                        height='24'
+                        fill='none'
+                        stroke='currentColor'
+                        strokeLinecap='round'
+                        strokeLinejoin='round'
+                        strokeWidth='2'
+                        className='feather feather-log-out'
+                        viewBox='0 0 24 24'>
+                        <defs></defs>
+                        <path d='M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9'></path>
+                    </svg>
+                </button>
+            </div>
+        </>
+    )
+}
+export default LeftArea
--- a/src/layout/default/main-area/index.tsx
+++ b/src/layout/default/main-area/index.tsx
@@ -0,0 +1,269 @@
+import React from 'react'
+
+const MainArea: React.FC = () => {
+    return (
+        <>
+            <div className='main-area'>
+                <button className='btn-show-right-area'>
+                    <svg
+                        xmlns='http://www.w3.org/2000/svg'
+                        width='24'
+                        height='24'
+                        viewBox='0 0 24 24'
+                        fill='none'
+                        stroke='currentColor'
+                        strokeWidth='2'
+                        strokeLinecap='round'
+                        strokeLinejoin='round'
+                        className='feather feather-chevron-left'>
+                        <polyline points='15 18 9 12 15 6'></polyline>
+                    </svg>
+                </button>
+                <button className='btn-show-left-area'>
+                    <svg
+                        xmlns='http://www.w3.org/2000/svg'
+                        width='24'
+                        height='24'
+                        viewBox='0 0 24 24'
+                        fill='none'
+                        stroke='currentColor'
+                        strokeWidth='2'
+                        strokeLinecap='round'
+                        strokeLinejoin='round'>
+                        <line x1='3' y1='12' x2='21' y2='12'></line>
+                        <line x1='3' y1='6' x2='21' y2='6'></line>
+                        <line x1='3' y1='18' x2='21' y2='18'></line>
+                    </svg>
+                </button>
+                <div className='main-area-header'>
+                    <div className='search-wrapper' id='searchLine'>
+                        <input className='search-input' type='text' placeholder='e.g. files.doc' />
+                        <svg
+                            xmlns='http://www.w3.org/2000/svg'
+                            width='20'
+                            height='20'
+                            fill='none'
+                            stroke='currentColor'
+                            strokeLinecap='round'
+                            strokeLinejoin='round'
+                            strokeWidth='2'
+                            className='feather feather-search'
+                            viewBox='0 0 24 24'>
+                            <defs></defs>
+                            <circle cx='11' cy='11' r='8'></circle>
+                            <path d='M21 21l-4.35-4.35'></path>
+                        </svg>
+                    </div>
+                </div>
+                <section className='content-section'>
+                    <h1 className='section-header'>Quick Access</h1>
+                    <div className='access-links'>
+                        <div className='access-link-wrapper'>
+                            <div className='access-icon'>
+                                <svg
+                                    xmlns='http://www.w3.org/2000/svg'
+                                    width='56'
+                                    height='56'
+                                    viewBox='0 0 24 24'
+                                    fill='none'
+                                    stroke='currentColor'
+                                    strokeWidth='1'
+                                    strokeLinecap='round'
+                                    strokeLinejoin='round'
+                                    className='feather feather-image'>
+                                    <rect x='3' y='3' width='18' height='18' rx='2' ry='2'></rect>
+                                    <circle cx='8.5' cy='8.5' r='1.5'></circle>
+                                    <polyline points='21 15 16 10 5 21'></polyline>
+                                </svg>
+                            </div>
+                            <span className='access-text'>Images</span>
+                        </div>
+                        <div className='access-link-wrapper'>
+                            <div className='access-icon'>
+                                <svg
+                                    xmlns='http://www.w3.org/2000/svg'
+                                    width='56'
+                                    height='56'
+                                    viewBox='0 0 24 24'
+                                    fill='none'
+                                    stroke='currentColor'
+                                    strokeWidth='1'
+                                    strokeLinecap='round'
+                                    strokeLinejoin='round'
+                                    className='feather feather-music'>
+                                    <path d='M9 18V5l12-2v13'></path>
+                                    <circle cx='6' cy='18' r='3'></circle>
+                                    <circle cx='18' cy='16' r='3'></circle>
+                                </svg>
+                            </div>
+                            <span className='access-text'>Music</span>
+                        </div>
+                        <div className='access-link-wrapper'>
+                            <div className='access-icon'>
+                                <svg
+                                    xmlns='http://www.w3.org/2000/svg'
+                                    width='56'
+                                    height='56'
+                                    viewBox='0 0 24 24'
+                                    fill='currentColor'
+                                    stroke='currentColor'
+                                    strokeWidth='1'
+                                    strokeLinecap='round'
+                                    strokeLinejoin='round'
+                                    className='feather feather-play'>
+                                    <polygon points='5 3 19 12 5 21 5 3'></polygon>
+                                </svg>
+                            </div>
+                            <span className='access-text'>Video</span>
+                        </div>
+                        <div className='access-link-wrapper'>
+                            <div className='access-icon'>
+                                <svg
+                                    xmlns='http://www.w3.org/2000/svg'
+                                    width='56'
+                                    height='56'
+                                    viewBox='0 0 24 24'
+                                    fill='none'
+                                    stroke='currentColor'
+                                    strokeWidth='1'
+                                    strokeLinecap='round'
+                                    strokeLinejoin='round'
+                                    className='feather feather-align-left'>
+                                    <line x1='17' y1='10' x2='3' y2='10'></line>
+                                    <line x1='21' y1='6' x2='3' y2='6'></line>
+                                    <line x1='21' y1='14' x2='3' y2='14'></line>
+                                    <line x1='17' y1='18' x2='3' y2='18'></line>
+                                </svg>
+                            </div>
+                            <span className='access-text'>Docs</span>
+                        </div>
+                        <div className='access-link-wrapper'>
+                            <div className='access-icon'>
+                                <svg
+                                    xmlns='http://www.w3.org/2000/svg'
+                                    width='56'
+                                    height='56'
+                                    viewBox='0 0 24 24'
+                                    fill='none'
+                                    stroke='currentColor'
+                                    strokeWidth='1'
+                                    strokeLinecap='round'
+                                    strokeLinejoin='round'
+                                    className='feather feather-layers'>
+                                    <polygon points='12 2 2 7 12 12 22 7 12 2'></polygon>
+                                    <polyline points='2 17 12 22 22 17'></polyline>
+                                    <polyline points='2 12 12 17 22 12'></polyline>
+                                </svg>
+                            </div>
+                            <span className='access-text'>Apps</span>
+                        </div>
+                        <div className='access-link-wrapper'>
+                            <div className='access-icon'>
+                                <svg
+                                    xmlns='http://www.w3.org/2000/svg'
+                                    width='56'
+                                    height='56'
+                                    viewBox='0 0 24 24'
+                                    fill='none'
+                                    stroke='currentColor'
+                                    strokeWidth='1'
+                                    strokeLinecap='round'
+                                    strokeLinejoin='round'
+                                    className='feather feather-arrow-down-circle'>
+                                    <circle cx='12' cy='12' r='10'></circle>
+                                    <polyline points='8 12 12 16 16 12'></polyline>
+                                    <line x1='12' y1='8' x2='12' y2='16'></line>
+                                </svg>
+                            </div>
+                            <span className='access-text'>Download</span>
+                        </div>
+                    </div>
+                </section>
+                <section className='content-section'>
+                    <div className='section-header-wrapper'>
+                        <h1 className='section-header'>Preview</h1>
+                        <a className='section-header-link'>View in folders</a>
+                    </div>
+                    <div className='content-section-line'>
+                        <div className='section-part left'>
+                            <a className='image-wrapper'>
+                                <div className='image-overlay'>
+                                    <div className='video-info'>
+                                        <div className='video-info-text'>
+                                            <p className='video-name medium'>
+                                                Happiness &amp; Tears
+                                            </p>
+                                            <p className='video-subtext medium'>45.5 MB</p>
+                                        </div>
+                                        <button className='btn-play'></button>
+                                    </div>
+                                </div>
+                                <img src='https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2251&amp;q=80' />
+                                <span className='video-time'>10:32</span>
+                            </a>
+                        </div>
+                        <div className='section-part right'>
+                            <div className='content-part-line'>
+                                <a className='image-wrapper'>
+                                    <div className='image-overlay'>
+                                        <div className='video-info'>
+                                            <div className='video-info-text'>
+                                                <p className='video-name tiny'>High Hopes</p>
+                                                <p className='video-subtext tiny'>50 MB</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <img src='https://images.unsplash.com/photo-1515552726023-7125c8d07fb3?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2167&amp;q=80' />
+                                    <span className='video-time'>02:35</span>
+                                </a>
+                                <a className='image-wrapper'>
+                                    <div className='image-overlay'>
+                                        <div className='video-info'>
+                                            <div className='video-info-text'>
+                                                <p className='video-name tiny'>Imaginery you</p>
+                                                <p className='video-subtext tiny'>210.2 MB</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <img src='https://images.unsplash.com/photo-1542359649-31e03cd4d909?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2167&amp;q=80' />
+                                    <span className='video-time'>04:15</span>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+                <section className='content-section'>
+                    <div className='section-header-wrapper'>
+                        <h1 className='section-header'>Recent Files</h1>
+                        <a className='section-header-link'>View all files</a>
+                    </div>
+                    <div className='files-table'>
+                        <div className='files-table-header'>
+                            <div className='column-header table-cell'>Name</div>
+                            <div className='column-header table-cell size-cell'>Size</div>
+                            <div className='column-header table-cell'>Last Modified</div>
+                            <div className='column-header table-cell'>Action</div>
+                        </div>
+                        <div className='files-table-row'>
+                            <div className='table-cell name-cell pdf'>Brandenburg.pdf</div>
+                            <div className='table-cell'>42 MB</div>
+                            <div className='table-cell'>Aug 26, 2020</div>
+                            <div className='table-cell action-cell'>
+                                <button className='more-action'></button>
+                            </div>
+                        </div>
+                        <div className='files-table-row'>
+                            <div className='table-cell name-cell jpg'>TheLionsRoar.jpg</div>
+                            <div className='table-cell size-cell'>500 KB</div>
+                            <div className='table-cell'>Aug 26, 2020</div>
+                            <div className='table-cell action-cell'>
+                                <button className='more-action'></button>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </>
+    )
+}
+export default MainArea
--- a/src/layout/default/right-area/index.tsx
+++ b/src/layout/default/right-area/index.tsx
@@ -0,0 +1,133 @@
+import React from 'react'
+
+const RightArea: React.FC = () => {
+    return (
+        <>
+            <div className='right-area'>
+                <button className='btn-close-right'>
+                    <svg
+                        xmlns='http://www.w3.org/2000/svg'
+                        width='24'
+                        height='24'
+                        fill='none'
+                        stroke='currentColor'
+                        strokeLinecap='round'
+                        strokeLinejoin='round'
+                        strokeWidth='2'
+                        className='feather feather-x-circle'
+                        viewBox='0 0 24 24'>
+                        <defs></defs>
+                        <circle cx='12' cy='12' r='10'></circle>
+                        <path d='M15 9l-6 6M9 9l6 6'></path>
+                    </svg>
+                </button>
+                <div className='right-area-header-wrapper'>
+                    <p className='right-area-header'>Downloads</p>
+                    <button className='more-action'></button>
+                </div>
+                <div className='download-item-line'>
+                    <div className='line-header'>Today</div>
+                    <div className='download-area'>
+                        <div className='download-item-icon'>
+                            <svg
+                                xmlns='http://www.w3.org/2000/svg'
+                                viewBox='0 0 512 512'
+                                className=''>
+                                <defs></defs>
+                                <circle cx='256' cy='256' r='256' fill='#4b50dd'></circle>
+                                <path
+                                    fill='#f5f5f5'
+                                    d='M192 64h176c4.4 0 8 3.6 8 8v328c0 4.4-3.6 8-8 8H120c-4.4 0-8-3.6-8-8V148l80-84z'></path>
+                                <path
+                                    fill='#e6e6e6'
+                                    d='M184 148c4.4 0 8-3.6 8-8V64l-80 84h72z'></path>
+                                <circle cx='352' cy='384' r='52' fill='#2179a6'></circle>
+                                <g fill='#f5f5f5' className='g'>
+                                    <path d='M352 416c-2.208 0-4-1.788-4-4v-56c0-2.212 1.792-4 4-4s4 1.788 4 4v56c0 2.212-1.792 4-4 4z'></path>
+                                    <path d='M352 416a3.989 3.989 0 01-2.828-1.172l-20-20c-1.564-1.564-1.564-4.092 0-5.656s4.092-1.564 5.656 0L352 406.344l17.172-17.172c1.564-1.564 4.092-1.564 5.656 0s1.564 4.092 0 5.656l-20 20A3.989 3.989 0 01352 416z'></path>
+                                </g>
+                            </svg>
+                        </div>
+                        <div className='download-item-texts'>
+                            <p className='download-text-header'>Glitter.mp4</p>
+                            <p className='download-text-info'>
+                                34.45 MB<span>Waiting for download</span>
+                            </p>
+                        </div>
+                        <div className='download-icon'>
+                            <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 612 612'>
+                                <defs></defs>
+                                <path d='M403.939 295.749l-78.814 78.833V172.125c0-10.557-8.568-19.125-19.125-19.125s-19.125 8.568-19.125 19.125v202.457l-78.814-78.814c-7.478-7.478-19.584-7.478-27.043 0-7.478 7.478-7.478 19.584 0 27.042L289.208 431c4.59 4.59 10.863 6.005 16.812 4.953 5.929 1.052 12.221-.382 16.811-4.953l108.19-108.19c7.478-7.478 7.478-19.583 0-27.042-7.498-7.478-19.604-7.478-27.082-.019zM306 0C137.012 0 0 136.992 0 306s137.012 306 306 306 306-137.012 306-306S475.008 0 306 0zm0 573.75C158.125 573.75 38.25 453.875 38.25 306S158.125 38.25 306 38.25 573.75 158.125 573.75 306 453.875 573.75 306 573.75z'></path>
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+                <div className='download-item-line'>
+                    <div className='line-header'>Yesterday</div>
+                    <div className='download-area'>
+                        <div className='download-item-icon'>
+                            <svg
+                                xmlns='http://www.w3.org/2000/svg'
+                                viewBox='0 0 512 512'
+                                className=''>
+                                <defs></defs>
+                                <circle cx='256' cy='256' r='256' fill='#4bc0dd'></circle>
+                                <path
+                                    fill='#f5f5f5'
+                                    d='M192 64h176c4.4 0 8 3.6 8 8v328c0 4.4-3.6 8-8 8H120c-4.4 0-8-3.6-8-8V148l80-84z'></path>
+                                <path
+                                    fill='#e6e6e6'
+                                    d='M184 148c4.4 0 8-3.6 8-8V64l-80 84h72z'></path>
+                                <circle cx='352' cy='384' r='52' fill='#2179a6'></circle>
+                                <g fill='#f5f5f5' className='g'>
+                                    <path d='M352 416c-2.208 0-4-1.788-4-4v-56c0-2.212 1.792-4 4-4s4 1.788 4 4v56c0 2.212-1.792 4-4 4z'></path>
+                                    <path d='M352 416a3.989 3.989 0 01-2.828-1.172l-20-20c-1.564-1.564-1.564-4.092 0-5.656s4.092-1.564 5.656 0L352 406.344l17.172-17.172c1.564-1.564 4.092-1.564 5.656 0s1.564 4.092 0 5.656l-20 20A3.989 3.989 0 01352 416z'></path>
+                                </g>
+                            </svg>
+                        </div>
+                        <div className='download-item-texts'>
+                            <p className='download-text-header'>Glitter.mp4</p>
+                            <div className='progress-bar'>
+                                <span className='progress'></span>
+                            </div>
+                        </div>
+                        <div className='download-icon'>
+                            <svg xmlns='http://www.w3.org/2000/svg' viewBox='1 1 512 512'>
+                                <defs></defs>
+                                <path d='M256 512C114.613 512 0 397.383 0 256S114.613 0 256 0s256 114.613 256 256c-.168 141.316-114.684 255.832-256 256zm0-480C132.29 32 32 132.29 32 256s100.29 224 224 224 224-100.29 224-224c-.133-123.656-100.344-223.867-224-224zm0 0'></path>
+                                <path d='M208 368c-8.836 0-16-7.164-16-16V160c0-8.836 7.164-16 16-16s16 7.164 16 16v192c0 8.836-7.164 16-16 16zm0 0M304 368c-8.836 0-16-7.164-16-16V160c0-8.836 7.164-16 16-16s16 7.164 16 16v192c0 8.836-7.164 16-16 16zm0 0'></path>
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+                <div className='right-area-header-wrapper'>
+                    <p className='right-area-header'>File Received</p>
+                </div>
+                <div className='received-item-line'>
+                    <div className='progress-line'>
+                        <span className='time start'>15:30</span>
+                        <span className='time end'>18:30</span>
+                    </div>
+                    <div className='received-items-content'>
+                        <div className='received-files'>
+                            <div className='image-wrapper'>
+                                <img src='https://images.unsplash.com/photo-1523987355523-c7b5b0dd90a7?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=2250&amp;q=80' />
+                            </div>
+                            <div className='image-wrapper'>
+                                <img src='https://images.unsplash.com/photo-1498855926480-d98e83099315?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2250&amp;q=80' />
+                            </div>
+                            <div className='image-wrapper'>
+                                <img src='https://images.unsplash.com/photo-1492648272180-61e45a8d98a7?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=2250&amp;q=80' />
+                            </div>
+                        </div>
+                        <div className='received-files-info'>
+                            Received <span className='info-purple'>3 images</span> total{' '}
+                            <span className='info-purple'>50.3 MB</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+export default RightArea
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,6 +3,7 @@ import type { RouteObject } from 'react-router-dom'
 import NoFound from '@/views/404/404'
 import Login from '@/views/User/Login'
 import Register from '@/views/User/Register'
+import home from '@/views/Home/'
 const routes: RouteObject[] = [
    {
        path: '/',
@@ -16,6 +17,10 @@ const routes: RouteObject[] = [
        path: '/register',
        Component: Register,
    },
+    {
+        path: '/home',
+        Component: home,
+    },
 ]

 export default routes
--- a/src/views/Home/index.tsx
+++ b/src/views/Home/index.tsx
@@ -1,3 +1,13 @@
+// import FileSharing from '@/components/FileSharing'
+// import DefaultLayOut from '@/layout/default'
+
+import BlurCard from '@/components/BlurCard'
+
 export default () => {
-    return <div></div>
+    return (
+        <div>
+            {/*<DefaultLayOut />*/}
+            <BlurCard />
+        </div>
+    )
 }
--- a/src/views/User/Login/index.tsx
+++ b/src/views/User/Login/index.tsx
@@ -119,7 +119,7 @@ export default observer(() => {
                                        src={logo}
                                        style={{ width: '44px', height: '44px' }}
                                    />
-                                    <span>五味子云相册</span>
+                                    <span>五味子云存储</span>
                                </Space>
                                <div className={styles.subTitle}>随时随地分享你的美好瞬间</div>
                            </Space>
--- a/src/views/User/Register/index.tsx
+++ b/src/views/User/Register/index.tsx
@@ -94,7 +94,7 @@ export default observer(() => {
                                        src={logo}
                                        style={{ width: '44px', height: '44px' }}
                                    />
-                                    <span>五味子云相册</span>
+                                    <span>五味子云存储</span>
                                </Space>
                                <div className={styles.subTitle}>随时随地分享你的美好瞬间</div>
                            </Space>