126 lines
5.2 KiB
TypeScript
126 lines
5.2 KiB
TypeScript
import React from 'react';
|
|
import { EntityDict } from '@project/oak-app-domain';
|
|
import { RowWithActions, WebComponentProps } from 'oak-frontend-base';
|
|
import Styles from './styles.module.less';
|
|
import dayjs from 'dayjs';
|
|
import useFeatures from '@project/hooks/useFeatures';
|
|
import { HighlightWords } from '@project/utils/dom-utils';
|
|
import { SearchType } from '../../context/homeContext';
|
|
|
|
const EssayItem = (props: {
|
|
item: RowWithActions<EntityDict, 'essay'> & {
|
|
cover: string;
|
|
};
|
|
navigateTo: (params: { url: string; oakId: string }) => void;
|
|
t: (key: string) => string;
|
|
searchParam?: {
|
|
searchType: SearchType;
|
|
searchText: string;
|
|
};
|
|
}) => {
|
|
const { item, navigateTo, t, searchParam } = props;
|
|
const features = useFeatures();
|
|
// features.extraFile.
|
|
|
|
return (
|
|
<>
|
|
{item && (
|
|
<div
|
|
className={Styles.essay}
|
|
onClick={() => {
|
|
navigateTo({
|
|
url: `/essay/details`,
|
|
oakId: item.id!,
|
|
});
|
|
}}
|
|
>
|
|
{/* 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.isTop && (
|
|
<div className={Styles.top}>
|
|
{t('common::top')}
|
|
</div>
|
|
)}
|
|
{searchParam &&
|
|
searchParam.searchType === 'title' ? (
|
|
<HighlightWords
|
|
string={item.title!}
|
|
words={[searchParam.searchText]}
|
|
></HighlightWords>
|
|
) : (
|
|
item.title
|
|
)}
|
|
</div>
|
|
<div className={Styles.content}>
|
|
{/* {item.summary} */}
|
|
{searchParam &&
|
|
searchParam.searchType === 'content' ? (
|
|
<HighlightWords
|
|
string={item.summary!}
|
|
words={[searchParam.searchText]}
|
|
></HighlightWords>
|
|
) : (
|
|
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.meta}>
|
|
<div className={Styles.updatedAt}>
|
|
{t('common::$$updateAt$$') + ': '}
|
|
{dayjs(item.$$updateAt$$).format(
|
|
'YYYY-MM-DD HH:mm:ss'
|
|
)}
|
|
</div>
|
|
<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>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default EssayItem;
|