feat: 取消打包图片压缩
This commit is contained in:
landaiqing
@@ -59,7 +59,6 @@
|
||||
"stylelint-config-standard-less": "^3.0.1",
|
||||
"stylelint-order": "^6.0.4",
|
||||
"typescript": "^5.4.5",
|
||||
"unplugin-imagemin": "^0.5.18",
|
||||
"vite": "^5.2.12"
|
||||
}
|
||||
}
|
||||
|
||||
988
pnpm-lock.yaml
generated
988
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 23 MiB After Width: | Height: | Size: 55 KiB |
@@ -28,6 +28,6 @@
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: url("@/assets/images/background.png");
|
||||
background-image: url("@/assets/images/background.png") ;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@@ -1,110 +1,112 @@
|
||||
import React from 'react'
|
||||
/** @format */
|
||||
|
||||
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
|
||||
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;
|
||||
|
||||
@@ -1,133 +1,135 @@
|
||||
import React from 'react'
|
||||
/** @format */
|
||||
|
||||
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&auto=format&fit=crop&w=2250&q=80' />
|
||||
</div>
|
||||
<div className='image-wrapper'>
|
||||
<img src='https://images.unsplash.com/photo-1498855926480-d98e83099315?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80' />
|
||||
</div>
|
||||
<div className='image-wrapper'>
|
||||
<img src='https://images.unsplash.com/photo-1492648272180-61e45a8d98a7?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&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
|
||||
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&auto=format&fit=crop&w=2250&q=80" />
|
||||
</div>
|
||||
<div className="image-wrapper">
|
||||
<img src="https://images.unsplash.com/photo-1498855926480-d98e83099315?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" />
|
||||
</div>
|
||||
<div className="image-wrapper">
|
||||
<img src="https://images.unsplash.com/photo-1492648272180-61e45a8d98a7?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&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;
|
||||
|
||||
@@ -134,7 +134,9 @@ export default observer(() => {
|
||||
<div>
|
||||
<span>
|
||||
微信扫码
|
||||
<span className={styles.mp_tips}>关注公众号</span>
|
||||
<span className={styles.mp_tips}>
|
||||
关注公众号
|
||||
</span>
|
||||
</span>
|
||||
<br />
|
||||
登录更快更安全
|
||||
@@ -203,15 +205,16 @@ export default observer(() => {
|
||||
size: "large",
|
||||
}}
|
||||
placeholder={"请输入验证码"}
|
||||
captchaTextRender={(timing: boolean) => {
|
||||
captchaTextRender={(timing: boolean, count: number) => {
|
||||
if (timing) {
|
||||
return `${"获取验证码"}`;
|
||||
return `${count} ${"获取验证码"}`;
|
||||
// return `${"获取验证码"}`;
|
||||
}
|
||||
return "获取验证码";
|
||||
}}
|
||||
name="activeCode"
|
||||
phoneName={"phone"}
|
||||
countDown={300}
|
||||
countDown={60}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
|
||||
@@ -180,7 +180,7 @@ export default observer(() => {
|
||||
|
||||
async function oAuthLogin(type: string) {
|
||||
const res: any = await oauthLogin(type);
|
||||
window.open(res.data, "_blank");
|
||||
window.open(res.data);
|
||||
}
|
||||
|
||||
const [loginType, setLoginType] = useState<LoginType>("account");
|
||||
@@ -234,7 +234,9 @@ export default observer(() => {
|
||||
<div>
|
||||
<span>
|
||||
微信扫码
|
||||
<span className={styles.mp_tips}>关注公众号</span>
|
||||
<span className={styles.mp_tips}>
|
||||
关注公众号
|
||||
</span>
|
||||
</span>
|
||||
<br />
|
||||
登录更快更安全
|
||||
@@ -341,10 +343,10 @@ export default observer(() => {
|
||||
size: "large",
|
||||
}}
|
||||
placeholder={"请输入验证码"}
|
||||
captchaTextRender={(timing: boolean) => {
|
||||
captchaTextRender={(timing: boolean, count: number) => {
|
||||
if (timing) {
|
||||
// return `${count} ${"获取验证码"}`;
|
||||
return `${"获取验证码"}`;
|
||||
return `${count} ${"获取验证码"}`;
|
||||
// return `${"获取验证码"}`;
|
||||
}
|
||||
return "获取验证码";
|
||||
}}
|
||||
@@ -357,7 +359,7 @@ export default observer(() => {
|
||||
},
|
||||
]}
|
||||
fieldRef={captchaRef}
|
||||
countDown={300}
|
||||
countDown={60}
|
||||
onGetCaptcha={async () => {
|
||||
await openSmsCaptcha();
|
||||
}}
|
||||
|
||||
@@ -20,6 +20,7 @@ import { getSms, register } from "@/api/user";
|
||||
import { TinyColor } from "@ctrl/tinycolor";
|
||||
import { get, load } from "@/api/captcha";
|
||||
import RotateCaptcha, { CaptchaInstance, type TicketInfoType } from "react-rotate-captcha";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
// import useStore from '@/utils/store/useStore.tsx'
|
||||
type LoginType = "phone";
|
||||
|
||||
@@ -28,6 +29,7 @@ export default observer(() => {
|
||||
const registerCaptcha = useRef<CaptchaInstance>(null);
|
||||
const smsCaptcha = useRef<CaptchaInstance>(null);
|
||||
const captchaRef = useRef<CaptFieldRef | null | undefined>();
|
||||
const navigate = useNavigate();
|
||||
const colors = ["#6253E1", "#04BEFE"];
|
||||
const getHoverColors = (colors: string[]) =>
|
||||
colors.map((color) => new TinyColor(color).lighten(5).toString());
|
||||
@@ -94,11 +96,15 @@ export default observer(() => {
|
||||
};
|
||||
const res: any = await register(data);
|
||||
if (res && res.success && res.code === 0) {
|
||||
message.open({
|
||||
content: res.data,
|
||||
type: "success",
|
||||
duration: 5,
|
||||
});
|
||||
message
|
||||
.open({
|
||||
content: res.data,
|
||||
type: "success",
|
||||
duration: 5,
|
||||
})
|
||||
.then(() => {
|
||||
navigate("/login");
|
||||
});
|
||||
} else if (res.code === 0 && !res.success) {
|
||||
message.open({
|
||||
content: res.data,
|
||||
@@ -223,15 +229,16 @@ export default observer(() => {
|
||||
size: "large",
|
||||
}}
|
||||
placeholder={"请输入验证码"}
|
||||
captchaTextRender={(timing: boolean) => {
|
||||
captchaTextRender={(timing: boolean, count: number) => {
|
||||
if (timing) {
|
||||
return `${"获取验证码"}`;
|
||||
return `${count} ${"获取验证码"}`;
|
||||
// return `${"获取验证码"}`;
|
||||
}
|
||||
return "获取验证码";
|
||||
}}
|
||||
name="activeCode"
|
||||
phoneName={"phone"}
|
||||
countDown={300}
|
||||
countDown={60}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
|
||||
@@ -6,7 +6,6 @@ import * as path from "path";
|
||||
import { resolve } from "path";
|
||||
// icons plugin
|
||||
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
|
||||
import imagemin from "unplugin-imagemin/vite";
|
||||
import viteCompression from "vite-plugin-compression";
|
||||
import { createHtmlPlugin } from "vite-plugin-html";
|
||||
import legacy from "@vitejs/plugin-legacy";
|
||||
@@ -62,31 +61,6 @@ export default defineConfig(({ mode }) => {
|
||||
// 指定symbolId格式
|
||||
symbolId: "icon-[dir]-[name]",
|
||||
}),
|
||||
imagemin({
|
||||
// Default mode sharp. support squoosh and sharp
|
||||
mode: "sharp",
|
||||
beforeBundle: true,
|
||||
// Default configuration options for compressing different pictures
|
||||
compress: {
|
||||
jpg: {
|
||||
quality: 10,
|
||||
},
|
||||
jpeg: {
|
||||
quality: 10,
|
||||
},
|
||||
png: {
|
||||
quality: 10,
|
||||
},
|
||||
webp: {
|
||||
quality: 10,
|
||||
},
|
||||
},
|
||||
conversion: [
|
||||
{ from: "jpeg", to: "webp" },
|
||||
{ from: "png", to: "webp" },
|
||||
{ from: "JPG", to: "jpeg" },
|
||||
],
|
||||
}),
|
||||
viteCompression({
|
||||
verbose: true, // 是否在控制台中输出压缩结果
|
||||
disable: false,
|
||||
|
||||
Reference in New Issue
Block a user