diff --git a/.env.development b/.env.development index b7d7e9e..25d7e10 100644 --- 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='五味子云存储' diff --git a/.env.production b/.env.production index a621b3d..2d51d7b 100644 --- a/.env.production +++ b/.env.production @@ -9,4 +9,4 @@ VITE_APP_TITLE=生产环境 # 网络请求公用地址 VITE_API_BASE_URL='' -VITE_TITLE_NAME='五味子云相册' +VITE_TITLE_NAME='五味子云存储' diff --git a/package.json b/package.json index 7fd2868..b8c2663 100644 --- 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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f475e4c..1334e12 100644 --- 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'} diff --git a/src/components/BlurCard/fonts.less b/src/components/BlurCard/fonts.less new file mode 100644 index 0000000..9c0c2dd --- /dev/null +++ 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; +} diff --git a/src/components/BlurCard/index.less b/src/components/BlurCard/index.less new file mode 100644 index 0000000..497c74e --- /dev/null +++ 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%; +} diff --git a/src/components/BlurCard/index.tsx b/src/components/BlurCard/index.tsx new file mode 100644 index 0000000..553e923 --- /dev/null +++ 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 ( + <> +
+ +

Osaka

+ +
+ +
+ --> +
+
+

+ + + + + Osaka Castle +

+

Osaka, China

+
+
+ + ) +} +export default BlurCard diff --git a/src/layout/default/index.less b/src/layout/default/index.less new file mode 100644 index 0000000..7b14084 --- /dev/null +++ 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; + } +} + diff --git a/src/layout/default/index.tsx b/src/layout/default/index.tsx new file mode 100644 index 0000000..1046eb9 --- /dev/null +++ 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 ( + <> +
+ + + +
+ + ) +} +export default DefaultLayOut diff --git a/src/layout/default/left-area/index.tsx b/src/layout/default/left-area/index.tsx new file mode 100644 index 0000000..9221ea1 --- /dev/null +++ b/src/layout/default/left-area/index.tsx @@ -0,0 +1,110 @@ +import React from 'react' + +const LeftArea: React.FC = () => { + return ( + <> +
+ +
MyDocs
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + ) +} +export default LeftArea diff --git a/src/layout/default/main-area/index.tsx b/src/layout/default/main-area/index.tsx new file mode 100644 index 0000000..d1dcd25 --- /dev/null +++ b/src/layout/default/main-area/index.tsx @@ -0,0 +1,269 @@ +import React from 'react' + +const MainArea: React.FC = () => { + return ( + <> +
+ + +
+
+ + + + + + +
+
+
+

Quick Access

+
+
+
+ + + + + +
+ Images +
+
+
+ + + + + +
+ Music +
+
+
+ + + +
+ Video +
+
+
+ + + + + + +
+ Docs +
+
+
+ + + + + +
+ Apps +
+
+
+ + + + + +
+ Download +
+
+
+
+
+

Preview

+ View in folders +
+
+
+ +
+
+
+

+ Happiness & Tears +

+

45.5 MB

+
+ +
+
+ + 10:32 + +
+
+
+ +
+
+
+

High Hopes

+

50 MB

+
+
+
+ + 02:35 + + +
+
+
+

Imaginery you

+

210.2 MB

+
+
+
+ + 04:15 + +
+
+
+
+
+
+

Recent Files

+ View all files +
+
+
+
Name
+
Size
+
Last Modified
+
Action
+
+
+
Brandenburg.pdf
+
42 MB
+
Aug 26, 2020
+
+ +
+
+
+
TheLionsRoar.jpg
+
500 KB
+
Aug 26, 2020
+
+ +
+
+
+
+
+ + ) +} +export default MainArea diff --git a/src/layout/default/right-area/index.tsx b/src/layout/default/right-area/index.tsx new file mode 100644 index 0000000..d228204 --- /dev/null +++ b/src/layout/default/right-area/index.tsx @@ -0,0 +1,133 @@ +import React from 'react' + +const RightArea: React.FC = () => { + return ( + <> +
+ +
+

Downloads

+ +
+
+
Today
+
+
+ + + + + + + + + + + +
+
+

Glitter.mp4

+

+ 34.45 MBWaiting for download +

+
+
+ + + + +
+
+
+
+
Yesterday
+
+
+ + + + + + + + + + + +
+
+

Glitter.mp4

+
+ +
+
+
+ + + + + +
+
+
+
+

File Received

+
+
+
+ 15:30 + 18:30 +
+
+
+
+ +
+
+ +
+
+ +
+
+
+ Received 3 images total{' '} + 50.3 MB +
+
+
+
+ + ) +} +export default RightArea diff --git a/src/router/index.ts b/src/router/index.ts index 4774781..1e3d74a 100644 --- 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 diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx index daa9162..c09e1ab 100644 --- 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
+ return ( +
+ {/**/} + +
+ ) } diff --git a/src/views/User/Login/index.tsx b/src/views/User/Login/index.tsx index 858f9d9..fec59d2 100644 --- 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' }} /> - 五味子云相册 + 五味子云存储
随时随地分享你的美好瞬间
diff --git a/src/views/User/Register/index.tsx b/src/views/User/Register/index.tsx index 5649589..e3c1675 100644 --- 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' }} /> - 五味子云相册 + 五味子云存储
随时随地分享你的美好瞬间