|
|
|
|
@ -1,19 +1,18 @@
|
|
|
|
|
import { Avatar, Tag } from '@lobehub/ui';
|
|
|
|
|
import { Skeleton, Typography, App } from 'antd';
|
|
|
|
|
import { Skeleton, Typography } from 'antd';
|
|
|
|
|
import { createStyles } from 'antd-style';
|
|
|
|
|
import { startCase } from 'lodash-es';
|
|
|
|
|
import dynamic from 'next/dynamic';
|
|
|
|
|
import qs from 'query-string';
|
|
|
|
|
import { memo, useState } from 'react';
|
|
|
|
|
import { memo } from 'react';
|
|
|
|
|
import { Center, Flexbox, FlexboxProps } from 'react-layout-kit';
|
|
|
|
|
import urlJoin from 'url-join';
|
|
|
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
|
|
|
|
|
|
import { DiscoverPlugintem } from '@/types/discover';
|
|
|
|
|
import { useUserStore } from '@/store/user';
|
|
|
|
|
|
|
|
|
|
import CardBanner from '../../../components/CardBanner';
|
|
|
|
|
import { useCategoryItem } from './useCategory';
|
|
|
|
|
import { StarOutlined } from '@ant-design/icons';
|
|
|
|
|
import request from '@/app/api/request';
|
|
|
|
|
|
|
|
|
|
const Link = dynamic(() => import('next/link'), {
|
|
|
|
|
loading: () => <Skeleton.Button size={'small'} style={{ height: 22 }} />,
|
|
|
|
|
ssr: false,
|
|
|
|
|
@ -62,15 +61,6 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
|
|
|
|
|
font-size: 18px !important;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
`,
|
|
|
|
|
collectBtn: css`
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
background: #FFF3D9;
|
|
|
|
|
text-align: center;
|
|
|
|
|
`,
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
interface PluginCardProps
|
|
|
|
|
@ -83,63 +73,10 @@ interface PluginCardProps
|
|
|
|
|
const PluginCard = memo<PluginCardProps>(
|
|
|
|
|
({ className, showCategory, meta, createdAt, author, variant, ...rest }) => {
|
|
|
|
|
const { avatar, title, description, tags = [], category } = meta;
|
|
|
|
|
const { createAt, homepage, identifier, schemaVersion, status, classify, manifest,locale } = {...rest}
|
|
|
|
|
const categoryItem = useCategoryItem(category, 12);
|
|
|
|
|
const { cx, styles, theme } = useStyles();
|
|
|
|
|
const { t } = useTranslation('discover');
|
|
|
|
|
const { message } = App.useApp();
|
|
|
|
|
const isCompact = variant === 'compact';
|
|
|
|
|
const getUserId = (s: UserStore) => s.user?.id
|
|
|
|
|
const userId = getUserId(useUserStore.getState())
|
|
|
|
|
console.log(status,"9383737-------------------------------------")
|
|
|
|
|
console.log(manifest,locale,"plugins9999999999-------------------")
|
|
|
|
|
const [val, setVal] = useState('')
|
|
|
|
|
const handleCollect = (e) => {
|
|
|
|
|
console.log(e,8844848)
|
|
|
|
|
e.preventDefault()
|
|
|
|
|
e.stopPropagation()
|
|
|
|
|
const params = {
|
|
|
|
|
"author": author,
|
|
|
|
|
"createdAt": createdAt,
|
|
|
|
|
"homepage": homepage,
|
|
|
|
|
"identifier": identifier,
|
|
|
|
|
"avatar": avatar,
|
|
|
|
|
"description": description,
|
|
|
|
|
"tags": tags.join(','),
|
|
|
|
|
"title": title,
|
|
|
|
|
"category": category,
|
|
|
|
|
"schemaVersion": schemaVersion,
|
|
|
|
|
"manifest": manifest,
|
|
|
|
|
"locale": locale,
|
|
|
|
|
"userid": userId,
|
|
|
|
|
}
|
|
|
|
|
request({
|
|
|
|
|
url: "/flxai/api/robot/appaiplugin",
|
|
|
|
|
method: "post",
|
|
|
|
|
data: params
|
|
|
|
|
}).then(response => {
|
|
|
|
|
console.log(response,222222222)
|
|
|
|
|
if (response.code == 0) {
|
|
|
|
|
message.success(t('collectSuccess'));
|
|
|
|
|
setVal("1")
|
|
|
|
|
}
|
|
|
|
|
}).catch(error => {
|
|
|
|
|
console.error('Error fetching data: ', error);
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
const renderElement = () => {
|
|
|
|
|
console.log(classify,'66666----------------------')
|
|
|
|
|
if (classify != 'collect') {
|
|
|
|
|
console.log(status,"222222222--------------------------")
|
|
|
|
|
if(status == "1" || val == "1") {
|
|
|
|
|
return <div className={styles.collectBtn} onClick={(e) => {e.stopPropagation()}}><StarOutlined style={{color: '#FFAD01'}}/></div>
|
|
|
|
|
} else {
|
|
|
|
|
return <div className={styles.collectBtn} style={{background: '#F1F1F1'}} onClick={(e) => handleCollect(e)}><StarOutlined style={{color: '#D6D6D6'}}/></div>
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Flexbox className={cx(styles.container, className)} gap={24} {...rest}>
|
|
|
|
|
{!isCompact && <CardBanner avatar={avatar} />}
|
|
|
|
|
@ -184,28 +121,29 @@ const PluginCard = memo<PluginCardProps>(
|
|
|
|
|
<Paragraph className={styles.desc} ellipsis={{ rows: 2 }}>
|
|
|
|
|
{description}
|
|
|
|
|
</Paragraph>
|
|
|
|
|
<Flexbox gap={6} horizontal style={{ flexWrap: 'wrap',justifyContent: 'space-between' }}>
|
|
|
|
|
<div onClick={(e) => {e.stopPropagation()}} style={{width: '85%'}}>
|
|
|
|
|
{showCategory && categoryItem ? (
|
|
|
|
|
<Tag icon={categoryItem.icon} style={{ margin: '0 5' }}>
|
|
|
|
|
{categoryItem.label}
|
|
|
|
|
</Tag>
|
|
|
|
|
) : (
|
|
|
|
|
tags
|
|
|
|
|
.slice(0, 4)
|
|
|
|
|
.filter(Boolean)
|
|
|
|
|
.map((tag: string, index) => {
|
|
|
|
|
const url = qs.stringifyUrl({
|
|
|
|
|
query: { q: tag, type: 'plugins' },
|
|
|
|
|
url: '/discover/search',
|
|
|
|
|
});
|
|
|
|
|
return (
|
|
|
|
|
<Tag style={{ margin: '0 5' }}>{startCase(tag).trim()}</Tag>
|
|
|
|
|
);
|
|
|
|
|
})
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
{renderElement()}
|
|
|
|
|
<Flexbox gap={6} horizontal style={{ flexWrap: 'wrap' }}>
|
|
|
|
|
{showCategory && categoryItem ? (
|
|
|
|
|
<Link href={urlJoin('/discover/plugins', categoryItem.key)}>
|
|
|
|
|
<Tag icon={categoryItem.icon} style={{ margin: 0 }}>
|
|
|
|
|
{categoryItem.label}
|
|
|
|
|
</Tag>
|
|
|
|
|
</Link>
|
|
|
|
|
) : (
|
|
|
|
|
tags
|
|
|
|
|
.slice(0, 4)
|
|
|
|
|
.filter(Boolean)
|
|
|
|
|
.map((tag: string, index) => {
|
|
|
|
|
const url = qs.stringifyUrl({
|
|
|
|
|
query: { q: tag, type: 'plugins' },
|
|
|
|
|
url: '/discover/search',
|
|
|
|
|
});
|
|
|
|
|
return (
|
|
|
|
|
<Link href={url} key={index}>
|
|
|
|
|
<Tag style={{ margin: 0 }}>{startCase(tag).trim()}</Tag>
|
|
|
|
|
</Link>
|
|
|
|
|
);
|
|
|
|
|
})
|
|
|
|
|
)}
|
|
|
|
|
</Flexbox>
|
|
|
|
|
</Flexbox>
|
|
|
|
|
</Flexbox>
|
|
|
|
|
|
