chore: 使用 trubo & styled-component 重构

[big-camel]

描述

感谢作者的贡献，这个预览组件用起来很爽~

这里我做了一些比较的改动和功能更新，可能有些东西不是所有人都喜欢，我先放这里了~

另外不知道作者是否还在维护，如果能抽出时间审核这个 pr 最好 ^_^

如果没有希望合并，我将在我的分支上继续迭代 https://github.com/big-camel/react-image-previewer ~感谢！

开发环境

• 使用 trubo + pnpm +changeset 重构，在开发包的时候支持热更新
• 更新了 nextra 依赖到最新，next 到 12.3
• 文档全部使用 styled-component + tailwindcss 支持 css-in-js

功能更新

样式

• 不再单独输出 css 文件，使用 css-in-js
• z-index 设置最大到 z-50 (tailwindcss)
• 预览图片默认添加白色背景色，防止透明图片无法看清

模式选择 mode: drag | slide

• 非触屏设备可以选择 drag 模式，触屏强制 slide 模式（当前逻辑现状）
• drag 模式左右滑动不再切换图片
• drag 模式放大和缩小根据图片实际大小计算
• drag 模式图片可以在视图内自由拖动

启用自定义工具栏时，移除 close 图标 #130

• 已完成

添加 enableMouseZoom 属性

• 可选择是否启用鼠标缩放。#117

overlayRender 参数中增加当前预览图片是否正在加载中 loading

在自定义工具栏时，可以根据是否正在 loading 判断禁用按钮

• 已完成

Bug 修复

修复只有一张图片开启loop为true的bug #141

• 已完成

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
react-photo-view	❌ Failed (Inspect)		Dec 30, 2022 at 7:09AM (UTC)

[big-camel]

#139

[MinJieLiu]

这个改动有点大，还是保持你这边一个单独的包最好😊

[big-camel]

这个改动有点大，还是保持你这边一个单独的包最好😊

嗯，好的~