refactor: image component

ruislan · Jun 19, 2023 · aab08e0 · aab08e0
1 parent 74b8e3f
commit aab08e0
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -112,7 +112,7 @@ docker-compose up
 
 * 还有不少功能和想法（例如成就体系、专题等）没有做进去，会持续做进去。
 * 增加搜索引擎，改进搜索、相关性
-* BaseWeb已经快1年没有更新了，找到一个比较惊喜的UI[NextUI](https://nextui.org)，不过其第一版还没有release，release 之后会酌情替换。
+* ~~BaseWeb已经快1年没有更新了~~（居然时隔大半年更新到了v13.0.0），即便如此，我依然比较期待[NextUI](https://nextui.org)，虽然其第一版还没有release，release 之后会酌情替换。
 * 数据库新增MySQL或PG（SQLite只有文件锁）
 * 持续重构和优化。
 

diff --git a/ktap-steam-fetcher/skipList b/ktap-steam-fetcher/skipList
@@ -3251,3 +3251,4 @@
 1319120
 1318150
 1318160
+1318190
diff --git a/ktap-ui-web/src/components/image.js b/ktap-ui-web/src/components/image.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { useStyletron } from 'baseui';
+import { MOBILE_BREAKPOINT } from '../constants';
+import { Skeleton } from 'baseui/skeleton';
+
+function Image({ src, alt, width = 'auto', height = 'auto', skeletonWidth = 'auto', skeletonHeight = 'auto', }) {
+    const [css,] = useStyletron();
+    const [loaded, setLoaded] = React.useState(false);
+    return (
+        <>
+            {!loaded && (<Skeleton width={skeletonWidth} height={skeletonHeight} animation overrides={{
+                Root: {
+                    style: {
+                        borderTopLeftRadius: 'inherit',
+                        borderTopRightRadius: 'inherit',
+                        borderBottomLeftRadius: 'inherit',
+                        borderBottomRightRadius: 'inherit',
+                        [MOBILE_BREAKPOINT]: {
+                            height: '200px',
+                        }
+                    }
+                }
+            }} />)}
+            <img className={
+                css({
+                    width: width, height: height, objectFit: 'cover',
+                    borderTopLeftRadius: 'inherit',
+                    borderTopRightRadius: 'inherit',
+                    borderBottomLeftRadius: 'inherit',
+                    borderBottomRightRadius: 'inherit',
+                    display: loaded ? 'block' : 'none',
+                })
+            } onLoad={() => setLoaded(true)} src={src} alt={alt} />
+        </>
+    );
+}
+
+export default Image;
diff --git a/ktap-ui-web/src/components/side-box-apps.js b/ktap-ui-web/src/components/side-box-apps.js
@@ -6,6 +6,7 @@ import { useStyletron } from 'baseui';
 import { Skeleton } from 'baseui/skeleton';
 import SideBox from './side-box';
 import { Link } from 'react-router-dom';
+import Image from './image';
 
 function SideBoxApps({ title, apiUrl }) {
     const [css, theme] = useStyletron();
@@ -31,7 +32,7 @@ function SideBoxApps({ title, apiUrl }) {
         <SideBox title={title}>
             <Block display='grid' gridGap='scale100' gridTemplateColumns='1fr 1fr' paddingLeft='scale300' paddingBottom='scale600' paddingRight='scale300'>
                 {isLoading ?
-                    <Skeleton width="100%" height="380px" animation />
+                    <Skeleton width="316px" height="380px" animation />
                     :
                     dataList.map((app, i) => (
                         <Block key={i} width='100%'>
@@ -50,14 +51,10 @@ function SideBoxApps({ title, apiUrl }) {
                                     }
                                 })}
                             >
-                                <Block display='flex' width='100%' height='scale1800'>
-                                    <img
-                                        width='100%' height='100%'
-                                        className={css({
-                                            borderRadius: theme.borders.radius200,
-                                        })}
-                                        src={app.media.landscape.thumbnail}
-                                    />
+                                <Block display='flex' width='100%' overrides={{
+                                    Block: { style: { borderRadius: theme.borders.radius200, } }
+                                }}>
+                                    <Image src={app.media.landscape.thumbnail} width='100%' height='100%' skeletonHeight='156px' />
                                 </Block>
                                 <Block paddingRight='scale300' paddingTop='scale300' paddingBottom='scale300'>
                                     <LabelSmall marginBottom='scale100'>{app.name}</LabelSmall>

diff --git a/ktap-ui-web/src/pages/apps/glance.js b/ktap-ui-web/src/pages/apps/glance.js
@@ -14,6 +14,7 @@ import { useAuth } from '../../hooks/use-auth';
 import Tag from '../../components/tag';
 import { Linux, Mac, Win } from '../../components/icons';
 import RouterLink from '../../components/router-link';
+import Image from '../../components/image';
 
 function Field({ label, value }) {
     return (<Block
@@ -112,23 +113,17 @@ function Glance({ data }) {
                 overrides={{
                     Block: {
                         style: {
+                            borderRadius: theme.borders.radius300,
                             [MOBILE_BREAKPOINT]: {
                                 width: 'auto',
                                 height: 'auto',
+                                borderRadius: 0,
                             }
                         }
                     }
                 }}
             >
-                <img className={css({
-                    width: '100%',
-                    height: '100%',
-                    borderRadius: theme.borders.radius300,
-                    [MOBILE_BREAKPOINT]: {
-                        borderRadius: 0,
-                    }
-                })}
-                    src={data?.media?.filter(m => m.usage === AppMedia.usage.head)[0].image} />
+                <Image src={data?.media?.filter(m => m.usage === AppMedia.usage.head)[0].image} width='100%' height='100%' skeletonHeight='151px' />
             </Block>
             <Block overrides={{
                 Block: {

diff --git a/ktap-ui-web/src/pages/home/app-list-recommended.js b/ktap-ui-web/src/pages/home/app-list-recommended.js
@@ -1,44 +1,15 @@
 import React from 'react';
-import Tag from '../../components/tag';
+import { useStyletron } from 'baseui';
 import { Block } from 'baseui/block';
 import { Button } from "baseui/button";
-import { Skeleton } from 'baseui/skeleton';
 import { LabelLarge, ParagraphMedium } from 'baseui/typography';
 import { Star } from '../../components/icons';
 import { Link, useNavigate } from 'react-router-dom';
-import { useStyletron } from 'baseui';
-import { MOBILE_BREAKPOINT } from '../../constants';
+import Image from '../../components/image';
+import Tag from '../../components/tag';
 
 const tips = ['查看更多', '我还要', '再看看', '再来', 'More, More', '再查，再探', '接着奏乐，接着舞'];
 
-function Image({ src, alt }) {
-    const [css,] = useStyletron();
-    const [loaded, setLoaded] = React.useState(false);
-    return (
-        <>
-            {!loaded && (<Skeleton width='100%' height='350px' animation overrides={{
-                Root: {
-                    style: {
-                        borderTopLeftRadius: 'inherit',
-                        borderTopRightRadius: 'inherit',
-                        [MOBILE_BREAKPOINT]: {
-                            height: '200px',
-                        }
-                    }
-                }
-            }} />)}
-            <img className={
-                css({
-                    width: '100%', objectFit: 'cover',
-                    borderTopLeftRadius: 'inherit',
-                    borderTopRightRadius: 'inherit',
-                    display: loaded ? 'block' : 'none',
-                })
-            } onLoad={() => setLoaded(true)} src={src} alt={alt} />
-        </>
-    );
-}
-
 function AppCard({ app }) {
     const [css, theme] = useStyletron();
     const navigate = useNavigate();
@@ -50,7 +21,7 @@ function AppCard({ app }) {
             backgroundColor: theme.colors.backgroundSecondary,
             boxShadow: theme.lighting.shadow600, width: '100%',
         })}>
-            <Image src={app.media.landscape.image} alt={app.name} />
+            <Image src={app.media.landscape.image} alt={app.name} width='100%' height='100%' skeletonWidth='100%' skeletonHeight='350px' />
             <Block display='flex' flexDirection='column' paddingLeft='scale500' paddingRight='scale500' paddingBottom='scale500' paddingTop='scale300' gridGap='scale300'>
                 <LabelLarge overrides={{
                     Block: {