diff --git a/package.json b/package.json index 4a444f7..fa638d9 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ "nanoid": "^4.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-photo-view": "^1.2.3" + "react-photo-view": "^1.2.3", + "react-router-dom": "^6.6.1" }, "devDependencies": { "@faker-js/faker": "^7.6.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3d39aaf..3786180 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -15,6 +15,7 @@ specifiers: react: ^18.2.0 react-dom: ^18.2.0 react-photo-view: ^1.2.3 + react-router-dom: ^6.6.1 typescript: ^4.9.3 vite: ^4.0.0 @@ -25,6 +26,7 @@ dependencies: react: 18.2.0 react-dom: 18.2.0_react@18.2.0 react-photo-view: 1.2.3_biqbaboplfbrettd7655fr4n2y + react-router-dom: 6.6.1_biqbaboplfbrettd7655fr4n2y devDependencies: '@faker-js/faker': 7.6.0 @@ -328,6 +330,11 @@ packages: react: 18.2.0 dev: false + /@remix-run/router/1.2.1: + resolution: {integrity: sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==} + engines: {node: '>=14'} + dev: false + /@swc/core-darwin-arm64/1.3.24: resolution: {integrity: sha512-rR+9UpWm+fGXcipsjCst2hIL1GYIbo0YTLhJZWdIpQD6KRHHJMFXiydMgQQkDj2Ml7HpqUVgxj6m4ZWYL8b0OA==} engines: {node: '>=10'} @@ -782,6 +789,29 @@ packages: react-dom: 18.2.0_react@18.2.0 dev: false + /react-router-dom/6.6.1_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-u+8BKUtelStKbZD5UcY0NY90WOzktrkJJhyhNg7L0APn9t1qJNLowzrM9CHdpB6+rcPt6qQrlkIXsTvhuXP68g==} + engines: {node: '>=14'} + peerDependencies: + react: '>=16.8' + react-dom: '>=16.8' + dependencies: + '@remix-run/router': 1.2.1 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + react-router: 6.6.1_react@18.2.0 + dev: false + + /react-router/6.6.1_react@18.2.0: + resolution: {integrity: sha512-YkvlYRusnI/IN0kDtosUCgxqHeulN5je+ew8W+iA1VvFhf86kA+JEI/X/8NqYcr11hCDDp906S+SGMpBheNeYQ==} + engines: {node: '>=14'} + peerDependencies: + react: '>=16.8' + dependencies: + '@remix-run/router': 1.2.1 + react: 18.2.0 + dev: false + /react/18.2.0: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} engines: {node: '>=0.10.0'} diff --git a/src/App.tsx b/src/App.tsx index bed6988..a2e3776 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,5 @@ import Masonry from "@components/masonry"; - +import { Link, Outlet } from "react-router-dom"; import Image from "@components/image"; export default function App() { // return ; @@ -7,8 +7,12 @@ export default function App() { return (
- + {/* */} {/* */} + 测试第一个跳转 + test to video + test to read +
); } diff --git a/src/components/image/index.tsx b/src/components/image/index.tsx index add565d..5aafa2e 100644 --- a/src/components/image/index.tsx +++ b/src/components/image/index.tsx @@ -7,36 +7,36 @@ type ImageProps = { }; function useLoading(url: string) { - const [obj, setObj] = useState({ + const [obj, setObj] = useState({ width: 0, height: 0, again: false, - loading: true, + isLoaded: false, + success: true, }); - useMemo(() => { - getImageSize(url).then(({ width, height, again }) => { - setObj(() => ({ - width: width, - height: height, - again: again, - loading: false, - })); - }); + useMemo(async () => { + const res = await getImageSize(url); + if (res.success === false) { + setObj(() => ({ success: false, isLoaded: true })); + } else { + setObj(() => ({ ...res, isLoaded: true })); + } }, [url]); - return { loading: obj.loading, size: obj }; + return obj; } export default function Image({ url }: ImageProps) { - const { loading, size } = useLoading(url); - console.log({ loading, size }); + const res = useLoading(url), + { isLoaded, success } = res; + // console.log(res); return (
diff --git a/src/components/image/tool.ts b/src/components/image/tool.ts index fe03e2d..69f45c9 100644 --- a/src/components/image/tool.ts +++ b/src/components/image/tool.ts @@ -1,9 +1,14 @@ import { Once } from "@utils/index"; -export type ImageSize = { - width: number; - height: number; - again: boolean; -}; +export type ImageSize = + | { + width: number; + height: number; + again: boolean; + success: true; + } + | { + success: false; + }; /** * image组件的工具库 */ @@ -16,6 +21,7 @@ export function getImageSize(imageSrc: string): Promise { width: image.width, height: image.height, again: true, + success: true, }); } image.onload = () => @@ -23,18 +29,28 @@ export function getImageSize(imageSrc: string): Promise { width: image.width, height: image.height, again: false, + success: true, + }); + image.onerror = () => { + resolve({ + success: false, }); + }; }); } export function getResizeHeight(imageSizeObj: ImageSize, realwidth: number) { - const res = 100 + Math.ceil(Math.random() * 100); - if (imageSizeObj.width < 1 || imageSizeObj.height < 1) { + const res = Math.ceil((100 + Math.ceil(Math.random() * 100)) / 5) * 5; + if ( + imageSizeObj.success !== true || + imageSizeObj.width < 1 || + imageSizeObj.height < 1 + ) { return res; } const realheight = imageSizeObj.height / Math.floor(imageSizeObj.width / realwidth); - return isNaN(realheight) ? res : realheight; + return isNaN(realheight) ? res : Math.ceil(realheight / 5) * 5; } export const fallbackUrl = diff --git a/src/components/masonry/index.tsx b/src/components/masonry/index.tsx index b51f651..64457ff 100644 --- a/src/components/masonry/index.tsx +++ b/src/components/masonry/index.tsx @@ -28,7 +28,7 @@ export default function App() { return !!items[index]; }, minimumBatchSize: 12, - // totalItems: 30, + // totalItems: 10, }); return (
, + // loader: + // action: + // error组件 + errorElement: , + children: [ + { + // error组件 + errorElement: , + children: [ + { + //默认页面 + index: true, + element: , + }, + { + path: "video", + element: , + }, + { + path: "read", + element: , + }, + { + path: "photo", + element: , + }, + ], + }, + ], + }, +]); ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( // - + + // ); diff --git a/src/routers/error.tsx b/src/routers/error.tsx new file mode 100644 index 0000000..3c2cd3e --- /dev/null +++ b/src/routers/error.tsx @@ -0,0 +1,3 @@ +export default function ErrorPage() { + return

这里是error页

; +} diff --git a/src/routers/index.tsx b/src/routers/index.tsx new file mode 100644 index 0000000..5d66e97 --- /dev/null +++ b/src/routers/index.tsx @@ -0,0 +1,3 @@ +export default function Index() { + return

这里是首页

; +} diff --git a/src/routers/layout.tsx b/src/routers/layout.tsx new file mode 100644 index 0000000..45696b9 --- /dev/null +++ b/src/routers/layout.tsx @@ -0,0 +1,54 @@ +import { + Outlet, + NavLink, + useLoaderData, + Form, + redirect, + useNavigation, + useSubmit, +} from "react-router-dom"; +export default function Layout() { + const nav_lists = [ + { + id: 1, + pathname: "photo", + }, + { + id: 2, + pathname: "read", + }, + { + id: 3, + pathname: "video", + }, + ]; + return ( + <> +
首部
+
+ +
+ +
+
+
尾部
+ + ); +} diff --git a/src/routers/photo.tsx b/src/routers/photo.tsx new file mode 100644 index 0000000..68b075c --- /dev/null +++ b/src/routers/photo.tsx @@ -0,0 +1,3 @@ +export default function PhotoPage() { + return

这里是photographs页面

; +} diff --git a/src/routers/read.tsx b/src/routers/read.tsx new file mode 100644 index 0000000..4feac19 --- /dev/null +++ b/src/routers/read.tsx @@ -0,0 +1,3 @@ +export default function ReadPage() { + return

这里是read路由页面

; +} diff --git a/src/routers/video.tsx b/src/routers/video.tsx new file mode 100644 index 0000000..28fe082 --- /dev/null +++ b/src/routers/video.tsx @@ -0,0 +1,3 @@ +export default function VideoPage() { + return

这里是video页面

; +}