首页图片展示

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

@@ -18,8 +18,27 @@ export default OakComponent({
     },
     formData({ data }) {
         return {
-            list: data.essayLabels$label?.map((item) => {
+            list: data.essayLabels$label
+                ?.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,6 +28,17 @@ const EssayItem = (props: {
                         });
                     }}
                 >
+                    {/* image */}
+                    <div className={Styles.cover}>
+                        {item.cover ? (
+                            <img src={item.cover} alt={item.title} />
+                        ) : (
+                            <div className={Styles.noCover}>
+                                {t('common::noData')}
+                            </div>
+                        )}
+                    </div>
+                    <div className={Styles.body}>
                         <div className={Styles.title}>{item.title}</div>
                         <div className={Styles.content}>{item.summary}</div>
                         {/* labels */}
@@ -71,6 +84,7 @@ const EssayItem = (props: {
                             </div>
                         </div>
                     </div>
+                </div>
             )}
         </>
     );

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

@@ -6,12 +6,30 @@
     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;
     }
 
+    .cover {
+        width: 200px;
+        height: 120px;
+        margin-right: 20px;
+        border-radius: 5px;
+        overflow: hidden;
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    .body {
+        flex: 1;
+
         .title {
             font-size: 20px;
             font-weight: 600;
@@ -70,6 +88,6 @@
                     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,
     };