首页图片展示

src/components/frontend/home/essays/byLabel/index.ts

@@ -18,9 +18,28 @@ export default OakComponent({
     },
     formData({ data }) {
         return {
-            list: data.essayLabels$label?.map((item) => {
+            list: data.essayLabels$label
-                return item.essay;
+                ?.map((item) => {
-            }),
+                    return item.essay;
+                })
+                .map((item) => {
+                    const fileIndex = item?.extraFile$entity?.findIndex(
+                        (item) => item.tag1 === 'cover'
+                    );
+                    if (fileIndex !== undefined && fileIndex > -1) {
+                        return {
+                            ...item,
+                            // 获取封面的url地址
+                            cover: this.features.extraFile.getUrl(
+                                item!.extraFile$entity![fileIndex]
+                            ),
+                        };
+                    }
+                    return {
+                        ...item,
+                        cover: '',
+                    };
+                }),
         };
     },
 });

src/components/frontend/home/essays/byLabel/web.pc.tsx

@@ -10,7 +10,9 @@ const EssaysByLabel = (
         'label',
         false,
         {
-            list: RowWithActions<EntityDict, 'essay'>[];
+            list: (RowWithActions<EntityDict, 'essay'> & {
+                cover: string;
+            })[];
         }
     >
 ) => {

src/components/frontend/home/essays/index.ts

@@ -34,7 +34,21 @@ export default OakComponent({
     ],
     formData({ data }) {
         return {
-            list: data,
+            list: data.map(item => {
+                const fileIndex = item?.extraFile$entity?.findIndex(item => item.tag1 === 'cover')
+                if (fileIndex !== undefined && fileIndex > -1) { 
+                    const url = this.features.extraFile.getUrl(item!.extraFile$entity![fileIndex])
+                    return {
+                        ...item,
+                        // 获取封面的url地址
+                        cover: url,
+                    }
+                }
+                return {
+                    ...item,
+                    cover: "",
+                };
+            }),
         };
     },
 });

src/components/frontend/home/essays/item/index.tsx

@@ -6,7 +6,9 @@ import dayjs from 'dayjs';
 import useFeatures from '@project/hooks/useFeatures';
 
 const EssayItem = (props: {
-    item: RowWithActions<EntityDict, 'essay'>;
+    item: RowWithActions<EntityDict, 'essay'> & {
+        cover: string;
+    };
     navigateTo: (params: { url: string; oakId: string }) => void;
     t: (key: string) => string;
 }) => {
@@ -26,47 +28,59 @@ const EssayItem = (props: {
                         });
                     }}
                 >
-                    <div className={Styles.title}>{item.title}</div>
+                    {/* image */}
-                    <div className={Styles.content}>{item.summary}</div>
+                    <div className={Styles.cover}>
-                    {/* labels */}
+                        {item.cover ? (
-                    <div className={Styles.labels}>
+                            <img src={item.cover} alt={item.title} />
-                        {item.essayLabels$essay?.map((essayLabel) => {
+                        ) : (
-                            const label = essayLabel.label!;
+                            <div className={Styles.noCover}>
-                            return (
+                                {t('common::noData')}
-                                <div
+                            </div>
-                                    key={label.id}
+                        )}
-                                    className={Styles.label}
-                                    style={{
-                                        backgroundColor: label.bgColor,
-                                        color: label.textColor,
-                                    }}
-                                >
-                                    {label.name}
-                                </div>
-                            );
-                        })}
                     </div>
-                    {/* 发布于，上一次修改于 */}
+                    <div className={Styles.body}>
-                    <div className={Styles.meta}>
+                        <div className={Styles.title}>{item.title}</div>
-                        <div className={Styles.updatedAt}>
+                        <div className={Styles.content}>{item.summary}</div>
-                            {t('common::$$updateAt$$') + ': '}
+                        {/* labels */}
-                            {dayjs(item.$$updateAt$$).format(
+                        <div className={Styles.labels}>
-                                'YYYY-MM-DD HH:mm:ss'
+                            {item.essayLabels$essay?.map((essayLabel) => {
-                            )}
+                                const label = essayLabel.label!;
+                                return (
+                                    <div
+                                        key={label.id}
+                                        className={Styles.label}
+                                        style={{
+                                            backgroundColor: label.bgColor,
+                                            color: label.textColor,
+                                        }}
+                                    >
+                                        {label.name}
+                                    </div>
+                                );
+                            })}
                         </div>
-                        <div className={Styles.extra}>
+                        {/* 发布于，上一次修改于 */}
-                            <div className={Styles.publishedAt}>
+                        <div className={Styles.meta}>
-                                {t('common::$$createAt$$') + ': '}
+                            <div className={Styles.updatedAt}>
-                                {dayjs(item.$$createAt$$).format(
+                                {t('common::$$updateAt$$') + ': '}
+                                {dayjs(item.$$updateAt$$).format(
                                     'YYYY-MM-DD HH:mm:ss'
                                 )}
                             </div>
-                            {/* 作者信息 */}
+                            <div className={Styles.extra}>
-                            <div className={Styles.creator}>
+                                <div className={Styles.publishedAt}>
-                                {t('common::creator') + ': '}
+                                    {t('common::$$createAt$$') + ': '}
-                                {item.creator?.name ||
+                                    {dayjs(item.$$createAt$$).format(
-                                    item.creator?.nickname ||
+                                        'YYYY-MM-DD HH:mm:ss'
-                                    ''}
+                                    )}
+                                </div>
+                                {/* 作者信息 */}
+                                <div className={Styles.creator}>
+                                    {t('common::creator') + ': '}
+                                    {item.creator?.name ||
+                                        item.creator?.nickname ||
+                                        ''}
+                                </div>
                             </div>
                         </div>
                     </div>

src/components/frontend/home/essays/item/styles.module.less

@@ -6,70 +6,88 @@
     background-color: #fff;
     box-shadow: 0 1px 3px rgba(26, 26, 26, 0.1);
     transition: all 0.3s ease;
+    display: flex;
 
     &:hover {
         box-shadow: 0 1px 5px rgba(26, 26, 26, 0.3);
         cursor: pointer;
     }
 
-    .title {
+    .cover {
-        font-size: 20px;
+        width: 200px;
-        font-weight: 600;
+        height: 120px;
-        color: #333;
+        margin-right: 20px;
-        margin-bottom: 10px;
+        border-radius: 5px;
-    }
+        overflow: hidden;
 
-    .content {
+        img {
-        font-size: 14px;
+            width: 100%;
-        color: #666;
+            height: 100%;
-        margin-bottom: 10px;
+            object-fit: cover;
-    }
-
-    .labels {
-        display: flex;
-        flex-wrap: wrap;
-
-        .label {
-            padding: 2px 5px;
-            margin-right: 5px;
-            margin-bottom: 5px;
-            font-size: 14px;
-            border-radius: 5px;
-            box-shadow: 0 1px 5px rgba(26, 26, 26, 0.3);
         }
     }
 
-    .meta {
+    .body {
-        display: flex;
+        flex: 1;
-        justify-content: space-between;
-        align-items: center;
-        margin-top: 10px;
 
-        .author {
+        .title {
+            font-size: 20px;
+            font-weight: 600;
+            color: #333;
+            margin-bottom: 10px;
+        }
+
+        .content {
             font-size: 14px;
             color: #666;
+            margin-bottom: 10px;
         }
 
-        .updatedAt {
+        .labels {
-            font-size: 14px;
-            color: #666;
-        }
-
-        .extra {
             display: flex;
-            align-items: center;
+            flex-wrap: wrap;
-            justify-content: center;
-            gap: 10px;
 
-            .publishedAt {
+            .label {
+                padding: 2px 5px;
+                margin-right: 5px;
+                margin-bottom: 5px;
                 font-size: 14px;
-                color: #666;
+                border-radius: 5px;
+                box-shadow: 0 1px 5px rgba(26, 26, 26, 0.3);
             }
+        }
+
+        .meta {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 10px;
+
             .author {
                 font-size: 14px;
                 color: #666;
             }
+
+            .updatedAt {
+                font-size: 14px;
+                color: #666;
+            }
+
+            .extra {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 10px;
+
+                .publishedAt {
+                    font-size: 14px;
+                    color: #666;
+                }
+                .author {
+                    font-size: 14px;
+                    color: #666;
+                }
+            }
         }
-        
     }
 }

src/components/frontend/home/essays/web.pc.tsx

@@ -10,7 +10,9 @@ const Essays = (
         'essay',
         true,
         {
-            list: RowWithActions<EntityDict, 'essay'>[];
+            list: (RowWithActions<EntityDict, 'essay'> & {
+                cover: string;
+            })[];
         }
     >
 ) => {
@@ -27,6 +29,7 @@ const Essays = (
                                 item={item}
                                 navigateTo={navigateTo}
                                 t={t}
+                                key={item.id}
                             />
                         );
                     })}

src/utils/projection.ts

@@ -3,15 +3,18 @@ import { EntityDict } from '@project/oak-app-domain';
 export const extraFileProjection: EntityDict['extraFile']['Selection']['data'] =
     {
         id: 1,
-        tag1: 1,
         origin: 1,
+        type: 1,
         bucket: 1,
         objectId: 1,
+        tag1: 1,
+        tag2: 1,
         filename: 1,
-        extra1: 1,
-        extension: 1,
-        type: 1,
         entity: 1,
+        entityId: 1,
+        extra1: 1,
+        extra2: 1,
+        extension: 1,
         sort: 1,
     };