首页图片展示
This commit is contained in:
pqcqaq
parent
aa9ad3f045
commit
f863012a10
|
|
@ -18,9 +18,28 @@ export default OakComponent({
|
|||
},
|
||||
formData({ data }) {
|
||||
return {
|
||||
list: data.essayLabels$label?.map((item) => {
|
||||
return item.essay;
|
||||
}),
|
||||
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: '',
|
||||
};
|
||||
}),
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@ const EssaysByLabel = (
|
|||
'label',
|
||||
false,
|
||||
{
|
||||
list: RowWithActions<EntityDict, 'essay'>[];
|
||||
list: (RowWithActions<EntityDict, 'essay'> & {
|
||||
cover: string;
|
||||
})[];
|
||||
}
|
||||
>
|
||||
) => {
|
||||
|
|
|
|||
|
|
@ -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: "",
|
||||
};
|
||||
}),
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<div className={Styles.content}>{item.summary}</div>
|
||||
{/* labels */}
|
||||
<div className={Styles.labels}>
|
||||
{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>
|
||||
);
|
||||
})}
|
||||
{/* 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.meta}>
|
||||
<div className={Styles.updatedAt}>
|
||||
{t('common::$$updateAt$$') + ': '}
|
||||
{dayjs(item.$$updateAt$$).format(
|
||||
'YYYY-MM-DD HH:mm:ss'
|
||||
)}
|
||||
<div className={Styles.body}>
|
||||
<div className={Styles.title}>{item.title}</div>
|
||||
<div className={Styles.content}>{item.summary}</div>
|
||||
{/* labels */}
|
||||
<div className={Styles.labels}>
|
||||
{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}>
|
||||
{t('common::$$createAt$$') + ': '}
|
||||
{dayjs(item.$$createAt$$).format(
|
||||
{/* 发布于，上一次修改于 */}
|
||||
<div className={Styles.meta}>
|
||||
<div className={Styles.updatedAt}>
|
||||
{t('common::$$updateAt$$') + ': '}
|
||||
{dayjs(item.$$updateAt$$).format(
|
||||
'YYYY-MM-DD HH:mm:ss'
|
||||
)}
|
||||
</div>
|
||||
{/* 作者信息 */}
|
||||
<div className={Styles.creator}>
|
||||
{t('common::creator') + ': '}
|
||||
{item.creator?.name ||
|
||||
item.creator?.nickname ||
|
||||
''}
|
||||
<div className={Styles.extra}>
|
||||
<div className={Styles.publishedAt}>
|
||||
{t('common::$$createAt$$') + ': '}
|
||||
{dayjs(item.$$createAt$$).format(
|
||||
'YYYY-MM-DD HH:mm:ss'
|
||||
)}
|
||||
</div>
|
||||
{/* 作者信息 */}
|
||||
<div className={Styles.creator}>
|
||||
{t('common::creator') + ': '}
|
||||
{item.creator?.name ||
|
||||
item.creator?.nickname ||
|
||||
''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.cover {
|
||||
width: 200px;
|
||||
height: 120px;
|
||||
margin-right: 20px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
|
||||
.content {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.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);
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
.body {
|
||||
flex: 1;
|
||||
|
||||
.author {
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.updatedAt {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.extra {
|
||||
.labels {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue