Skip to content

Commit

Permalink
chore: update
Browse files Browse the repository at this point in the history
  • Loading branch information
@YuzeTT
YuzeTT committed Nov 22, 2023
1 parent afbeaa3 commit 75aebef
Show file tree
Hide file tree
Showing 3 changed files with 74 additions and 50 deletions.
2 changes: 1 addition & 1 deletion src/pages/tools.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ export default function Heytea() {
</button> : ''
}
{status === 1 ?
<div className='p-2 bg-zinc-50 rounded-lg card'>
<div className='p-2 bg-zinc-50 rounded-lg'>
<div className='text-xs mb-2 op50'>导出选项</div>
<div className="flex gap-2">
<Button variant='second' bg='white' className='w-full shadow-card border border-gray-200 hover:bg-gray-100' isLoading={isLoading} loadingText='导出中' onClick={() => {
Expand Down
46 changes: 27 additions & 19 deletions src/pages/tools/rseg.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default function Rseg() {
const { isOpen: isOpen1, onOpen: onOpen1, onClose: onClose1 } = useDisclosure()
const { isOpen: isOpen2, onOpen: onOpen2, onClose: onClose2 } = useDisclosure()

const [highLight, ref]:[highLight: boolean, ref: RefObject<HTMLDivElement>] = useOutletContext();
const [highLight, ref]: [highLight: boolean, ref: RefObject<HTMLDivElement>] = useOutletContext();

const [image1, setImage1] = useState('');
const [image2, setImage2] = useState('');
Expand All @@ -38,7 +38,7 @@ export default function Rseg() {

const handleImage1Change = (e: ChangeEvent<HTMLInputElement>) => {
const file = e.target.files && e.target.files[0];
setImage1Size(file?.size||0)
setImage1Size(file?.size || 0)
if (file) {
const reader = new FileReader();

Expand All @@ -52,7 +52,7 @@ export default function Rseg() {
}
const handleImage2Change = (e: ChangeEvent<HTMLInputElement>) => {
const file = e.target.files && e.target.files[0];
setImage2Size(file?.size||0)
setImage2Size(file?.size || 0)
if (file) {
const reader = new FileReader();

Expand Down Expand Up @@ -87,7 +87,7 @@ export default function Rseg() {

return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}

return (
<div>
<Drawer
Expand All @@ -102,6 +102,10 @@ export default function Rseg() {
<DrawerHeader>裁剪图片</DrawerHeader>

<DrawerBody className='mx-auto'>
<div className='text-xs mb-4 text-orange-600'>
<span className='text-[0.7rem] text-white bg-orange-600 px-1 py-0.5 rounded mr-1 leading-6'>提示</span>
<span>如果此处没图片↓↓ 大概率是浏览器/格式不支持 或者尺寸太大需要稍等一会~ （微信内置浏览器可能无法加载较大的图片）</span>
</div>
<Cropper
src={image1}
style={{ height: 'auto', width: "auto", maxHeight: '50vh', maxWidth: "80vw" }}
Expand All @@ -119,7 +123,7 @@ export default function Rseg() {
{/* <Button variant='outline' mr={3} onClick={onClose1}>
取消
</Button> */}
<Button colorScheme='messenger' onClick={()=>{
<Button colorScheme='messenger' onClick={() => {
getCropData1()
onClose1()
}}>裁剪</Button>
Expand All @@ -138,6 +142,10 @@ export default function Rseg() {
<DrawerHeader>裁剪图片</DrawerHeader>

<DrawerBody className='mx-auto'>
<div className='text-xs mb-4 text-orange-600'>
<span className='text-[0.7rem] text-white bg-orange-600 px-1 py-0.5 rounded mr-1 leading-6'>提示</span>
<span>如果此处没图片↓↓ 大概率是浏览器/格式不支持 或者尺寸太大需要稍等一会~ （微信内置浏览器可能无法加载较大的图片）</span>
</div>
<Cropper
src={image2}
style={{ maxHeight: '50vh', width: "80vw" }}
Expand All @@ -155,7 +163,7 @@ export default function Rseg() {
{/* <Button variant='outline' mr={3} onClick={onClose2}>
取消
</Button> */}
<Button colorScheme='messenger' onClick={()=>{
<Button colorScheme='messenger' onClick={() => {
getCropData2()
onClose2()
}}>裁剪</Button>
Expand Down Expand Up @@ -193,37 +201,37 @@ export default function Rseg() {
</label>
</div>
<div>
{image1Size+image2Size>=5120000?
<div className='text-sm text-red-500 text-center mb-2'>文件较大({formatBytes(image1Size+image2Size)}) 导出可能需要 1-3分钟</div>:''
}
{image1Size + image2Size >= 5120000 ?
<div className='text-sm text-red-500 text-center mb-2'>文件较大({formatBytes(image1Size + image2Size)}) 导出可能需要 1-3分钟</div> : ''
}
</div>
<div className='mb-4'>
<table className='mx-auto'>
<tbody>
<tr>
<td className='text-sm op70'>3mm 出血线（印刷需打开）</td>
<td>
<Switch id='line' size='sm' isChecked={bleedingLine} onChange={(v)=>{setBleedingLine(v.target.checked)}} />
<Switch id='line' size='sm' isChecked={bleedingLine} onChange={(v) => { setBleedingLine(v.target.checked) }} />
</td>
</tr>
<tr>
<td className='text-sm op70'>修复模式（图像缺失需打开）</td>
<td>
<Switch id='line' size='sm' isChecked={isSmall} onChange={(v)=>{setIsSmall(v.target.checked)}} />
<Switch id='line' size='sm' isChecked={isSmall} onChange={(v) => { setIsSmall(v.target.checked) }} />
</td>
</tr>
</tbody>
</table>

<div className='flex text-sm justify-center items-center gap-2 mt-2'>
<div className='op70'>85*54mm(大陆)</div>
<Switch id='line' size='sm' isChecked={tw} onChange={(v)=>{setTw(v.target.checked)}} />
<Switch id='line' size='sm' isChecked={tw} onChange={(v) => { setTw(v.target.checked) }} />
<div className='op70'>90*54mm(中国台湾)</div>
</div>
</div>
<BaseCard ref={ref} className={`-mx-4 ${isSmall?'scale-85':''} ${tw?'scale-85':''}`}>
<div className={`${tw?'min-w-[386px] max-w-[386px] w-[386px]!':'min-w-[345px] max-w-[345px]'} z-0 relative min-h-[219px] bg-white ${highLight?'':'max-h-[219px] h-[219px]'} origin-top flex flex-col`} style={bleedingLine?{border:'12.18px dashed #FF000020'}:{}}>
<div className={`p-3 ${bleedingLine?'scale-95':'scale-100'} absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2`} style={{fontFamily: 'exo'}}>
<BaseCard ref={ref} className={`-mx-4 ${isSmall ? 'scale-85' : ''} ${tw ? 'scale-85' : ''}`}>
<div className={`${tw ? 'min-w-[386px] max-w-[386px] w-[386px]!' : 'min-w-[345px] max-w-[345px]'} z-0 relative min-h-[219px] bg-white ${highLight ? '' : 'max-h-[219px] h-[219px]'} origin-top flex flex-col`} style={bleedingLine ? { border: '12.18px dashed #FF000020' } : {}}>
<div className={`p-3 ${bleedingLine ? 'scale-95' : 'scale-100'} absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2`} style={{ fontFamily: 'exo' }}>
<table className='mx-auto'>
<tbody>
<tr>
Expand All @@ -248,14 +256,14 @@ export default function Rseg() {
</div>
</td>
<td className='flex gap-3'>
{image1Crop?
<div className='h-33 w-33 bg-center bg-contain bg-cover! bg-no-repeat overflow-hidden' style={{backgroundImage: `url(${image1Crop})`}}></div>:
{image1Crop ?
<div className='h-33 w-33 bg-center bg-contain bg-cover! bg-no-repeat overflow-hidden' style={{ backgroundImage: `url(${image1Crop})` }}></div> :
<div className='h-33 w-33 bg-zinc-200 flex justify-center items-center op50'>
请上传图片
</div>
}
{image2Crop?
<div className='h-33 w-33 bg-center bg-contain bg-cover! bg-no-repeat overflow-hidden' style={{backgroundImage: `url(${image2Crop})`}}></div>:
{image2Crop ?
<div className='h-33 w-33 bg-center bg-contain bg-cover! bg-no-repeat overflow-hidden' style={{ backgroundImage: `url(${image2Crop})` }}></div> :
<div className='h-33 w-33 bg-zinc-200 flex justify-center items-center op50'>
请上传图片
</div>
Expand Down
76 changes: 46 additions & 30 deletions src/pages/tools/rssg.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default function Rseg() {
const { isOpen: isOpen3, onOpen: onOpen3, onClose: onClose3 } = useDisclosure()
const { isOpen: isOpen4, onOpen: onOpen4, onClose: onClose4 } = useDisclosure()

const [highLight, ref]:[highLight: boolean, ref: RefObject<HTMLDivElement>] = useOutletContext();
const [highLight, ref]: [highLight: boolean, ref: RefObject<HTMLDivElement>] = useOutletContext();

const [image1, setImage1] = useState('');
const [image2, setImage2] = useState('');
Expand All @@ -50,7 +50,7 @@ export default function Rseg() {

const handleImage1Change = (e: ChangeEvent<HTMLInputElement>) => {
const file = e.target.files && e.target.files[0];
setImage1Size(file?.size||0)
setImage1Size(file?.size || 0)
if (file) {
const reader = new FileReader();

Expand All @@ -64,7 +64,7 @@ export default function Rseg() {
}
const handleImage2Change = (e: ChangeEvent<HTMLInputElement>) => {
const file = e.target.files && e.target.files[0];
setImage2Size(file?.size||0)
setImage2Size(file?.size || 0)
if (file) {
const reader = new FileReader();

Expand All @@ -78,7 +78,7 @@ export default function Rseg() {
}
const handleImage3Change = (e: ChangeEvent<HTMLInputElement>) => {
const file = e.target.files && e.target.files[0];
setImage3Size(file?.size||0)
setImage3Size(file?.size || 0)
if (file) {
const reader = new FileReader();

Expand All @@ -92,7 +92,7 @@ export default function Rseg() {
}
const handleImage4Change = (e: ChangeEvent<HTMLInputElement>) => {
const file = e.target.files && e.target.files[0];
setImage4Size(file?.size||0)
setImage4Size(file?.size || 0)
if (file) {
const reader = new FileReader();

Expand Down Expand Up @@ -137,7 +137,7 @@ export default function Rseg() {

return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}

return (
<div>
<Drawer
Expand All @@ -152,11 +152,15 @@ export default function Rseg() {
<DrawerHeader>裁剪图片</DrawerHeader>

<DrawerBody className='mx-auto'>
<div className='text-xs mb-4 text-orange-600'>
<span className='text-[0.7rem] text-white bg-orange-600 px-1 py-0.5 rounded mr-1 leading-6'>提示</span>
<span>如果此处没图片↓↓ 大概率是浏览器/格式不支持 或者尺寸太大需要稍等一会~ （微信内置浏览器可能无法加载较大的图片）</span>
</div>
<Cropper
src={image1}
style={{ height: 'auto', width: "auto", maxHeight: '50vh', maxWidth: "80vw" }}
initialAspectRatio={1}
aspectRatio={4/3}
aspectRatio={4 / 3}
guides={true}
autoCropArea={1}
ref={cropperRef1}
Expand All @@ -169,7 +173,7 @@ export default function Rseg() {
{/* <Button variant='outline' mr={3} onClick={onClose1}>
取消
</Button> */}
<Button colorScheme='messenger' onClick={()=>{
<Button colorScheme='messenger' onClick={() => {
getCropData1()
onClose1()
}}>裁剪</Button>
Expand All @@ -188,11 +192,15 @@ export default function Rseg() {
<DrawerHeader>裁剪图片</DrawerHeader>

<DrawerBody className='mx-auto'>
<div className='text-xs mb-4 text-orange-600'>
<span className='text-[0.7rem] text-white bg-orange-600 px-1 py-0.5 rounded mr-1 leading-6'>提示</span>
<span>如果此处没图片↓↓ 大概率是浏览器/格式不支持 或者尺寸太大需要稍等一会~ （微信内置浏览器可能无法加载较大的图片）</span>
</div>
<Cropper
src={image2}
style={{ maxHeight: '50vh', width: "80vw" }}
initialAspectRatio={1}
aspectRatio={4/3}
aspectRatio={4 / 3}
guides={true}
autoCropArea={1}
ref={cropperRef2}
Expand All @@ -205,7 +213,7 @@ export default function Rseg() {
{/* <Button variant='outline' mr={3} onClick={onClose2}>
取消
</Button> */}
<Button colorScheme='messenger' onClick={()=>{
<Button colorScheme='messenger' onClick={() => {
getCropData2()
onClose2()
}}>裁剪</Button>
Expand All @@ -224,11 +232,15 @@ export default function Rseg() {
<DrawerHeader>裁剪图片</DrawerHeader>

<DrawerBody className='mx-auto'>
<div className='text-xs mb-4 text-orange-600'>
<span className='text-[0.7rem] text-white bg-orange-600 px-1 py-0.5 rounded mr-1 leading-6'>提示</span>
<span>如果此处没图片↓↓ 大概率是浏览器/格式不支持 或者尺寸太大需要稍等一会~ （微信内置浏览器可能无法加载较大的图片）</span>
</div>
<Cropper
src={image3}
style={{ maxHeight: '50vh', width: "80vw" }}
initialAspectRatio={1}
aspectRatio={4/3}
aspectRatio={4 / 3}
guides={true}
autoCropArea={1}
ref={cropperRef3}
Expand All @@ -241,7 +253,7 @@ export default function Rseg() {
{/* <Button variant='outline' mr={3} onClick={onClose2}>
取消
</Button> */}
<Button colorScheme='messenger' onClick={()=>{
<Button colorScheme='messenger' onClick={() => {
getCropData3()
onClose3()
}}>裁剪</Button>
Expand All @@ -260,11 +272,15 @@ export default function Rseg() {
<DrawerHeader>裁剪图片</DrawerHeader>

<DrawerBody className='mx-auto'>
<div className='text-xs mb-4 text-orange-600'>
<span className='text-[0.7rem] text-white bg-orange-600 px-1 py-0.5 rounded mr-1 leading-6'>提示</span>
<span>如果此处没图片↓↓ 大概率是浏览器/格式不支持 或者尺寸太大需要稍等一会~ （微信内置浏览器可能无法加载较大的图片）</span>
</div>
<Cropper
src={image4}
style={{ maxHeight: '50vh', width: "80vw" }}
initialAspectRatio={1}
aspectRatio={4/3}
aspectRatio={4 / 3}
guides={true}
autoCropArea={1}
ref={cropperRef4}
Expand All @@ -277,7 +293,7 @@ export default function Rseg() {
{/* <Button variant='outline' mr={3} onClick={onClose2}>
取消
</Button> */}
<Button colorScheme='messenger' onClick={()=>{
<Button colorScheme='messenger' onClick={() => {
getCropData4()
onClose4()
}}>裁剪</Button>
Expand Down Expand Up @@ -343,52 +359,52 @@ export default function Rseg() {
</label>
</div>
<div>
{image1Size+image2Size+image3Size+image4Size>=5120000?
<div className='text-sm text-red-500 text-center mb-2'>文件较大({formatBytes(image1Size+image2Size+image3Size+image4Size)}) 导出可能需要 1-3分钟</div>:''
}
{image1Size + image2Size + image3Size + image4Size >= 5120000 ?
<div className='text-sm text-red-500 text-center mb-2'>文件较大({formatBytes(image1Size + image2Size + image3Size + image4Size)}) 导出可能需要 1-3分钟</div> : ''
}
</div>
<div className='mb-4'>
<table className='mx-auto'>
<tbody>
<tr>
<td className='text-sm op70'>3mm 出血线（印刷需打开）</td>
<td>
<Switch id='line' size='sm' isChecked={bleedingLine} onChange={(v)=>{setBleedingLine(v.target.checked)}} />
<Switch id='line' size='sm' isChecked={bleedingLine} onChange={(v) => { setBleedingLine(v.target.checked) }} />
</td>
</tr>
<tr>
<td className='text-sm op70'>修复模式（图像缺失需打开）</td>
<td>
<Switch id='line' size='sm' isChecked={isSmall} onChange={(v)=>{setIsSmall(v.target.checked)}} />
<Switch id='line' size='sm' isChecked={isSmall} onChange={(v) => { setIsSmall(v.target.checked) }} />
</td>
</tr>
</tbody>
</table>
</div>
<BaseCard ref={ref} className={`-mx-4 ${isSmall?'scale-85':''}`}>
<div className={`min-w-[203px] max-w-[203px] w-[203px] z-0 relative min-h-[609px] bg-white ${highLight?'':'max-h-[609px] h-[609px]'} origin-top flex flex-col`} style={bleedingLine?{border:'12.18px dashed #FF000020'}:{}}>
<div className={`p-3 ${bleedingLine?'scale-95':'scale-100'} absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2`} style={{fontFamily: 'exo'}}>
<BaseCard ref={ref} className={`-mx-4 ${isSmall ? 'scale-85' : ''}`}>
<div className={`min-w-[203px] max-w-[203px] w-[203px] z-0 relative min-h-[609px] bg-white ${highLight ? '' : 'max-h-[609px] h-[609px]'} origin-top flex flex-col`} style={bleedingLine ? { border: '12.18px dashed #FF000020' } : {}}>
<div className={`p-3 ${bleedingLine ? 'scale-95' : 'scale-100'} absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2`} style={{ fontFamily: 'exo' }}>
<div className='flex flex-col gap-2'>
{image1Crop?
<div className='h-30 w-40 bg-center bg-contain bg-cover! bg-no-repeat overflow-hidden' style={{backgroundImage: `url(${image1Crop})`}}></div>:
{image1Crop ?
<div className='h-30 w-40 bg-center bg-contain bg-cover! bg-no-repeat overflow-hidden' style={{ backgroundImage: `url(${image1Crop})` }}></div> :
<div className='h-30 w-40 bg-zinc-200 flex justify-center items-center op50'>
请上传图片
</div>
}
{image2Crop?
<div className='h-30 w-40 bg-center bg-contain bg-cover! bg-no-repeat overflow-hidden' style={{backgroundImage: `url(${image2Crop})`}}></div>:
{image2Crop ?
<div className='h-30 w-40 bg-center bg-contain bg-cover! bg-no-repeat overflow-hidden' style={{ backgroundImage: `url(${image2Crop})` }}></div> :
<div className='h-30 w-40 bg-zinc-200 flex justify-center items-center op50'>
请上传图片
</div>
}
{image3Crop?
<div className='h-30 w-40 bg-center bg-contain bg-cover! bg-no-repeat overflow-hidden' style={{backgroundImage: `url(${image3Crop})`}}></div>:
{image3Crop ?
<div className='h-30 w-40 bg-center bg-contain bg-cover! bg-no-repeat overflow-hidden' style={{ backgroundImage: `url(${image3Crop})` }}></div> :
<div className='h-30 w-40 bg-zinc-200 flex justify-center items-center op50'>
请上传图片
</div>
}
{image4Crop?
<div className='h-30 w-40 bg-center bg-contain bg-cover! bg-no-repeat overflow-hidden' style={{backgroundImage: `url(${image4Crop})`}}></div>:
{image4Crop ?
<div className='h-30 w-40 bg-center bg-contain bg-cover! bg-no-repeat overflow-hidden' style={{ backgroundImage: `url(${image4Crop})` }}></div> :
<div className='h-30 w-40 bg-zinc-200 flex justify-center items-center op50'>
请上传图片
</div>
Expand Down

0 comments on commit 75aebef

Please sign in to comment.