mirror of https://github.com/msgbyte/tailchat
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
import { Avatar } from '@/components/Avatar';
|
|
import { Button } from 'antd';
|
|
import React, { useState } from 'react';
|
|
import {
|
|
PluginManifest,
|
|
showToasts,
|
|
t,
|
|
useAsyncRequest,
|
|
} from 'tailchat-shared';
|
|
import { pluginManager } from '../manager';
|
|
|
|
/**
|
|
* 插件项
|
|
*/
|
|
export const PluginStoreItem: React.FC<{
|
|
manifest: PluginManifest;
|
|
installed: boolean;
|
|
builtin: boolean;
|
|
}> = React.memo((props) => {
|
|
const { manifest, builtin } = props;
|
|
const [installed, setInstalled] = useState(props.installed);
|
|
|
|
const [{ loading }, handleInstallPlugin] = useAsyncRequest(async () => {
|
|
await pluginManager.installPlugin(manifest);
|
|
if (manifest.requireRestart === true) {
|
|
showToasts(t('插件安装成功, 需要重启后生效'), 'success');
|
|
} else {
|
|
showToasts(t('插件安装成功'), 'success');
|
|
}
|
|
setInstalled(true);
|
|
}, [manifest]);
|
|
|
|
return (
|
|
<div className="rounded-md flex w-80 h-36 bg-black bg-opacity-40 py-2 px-3">
|
|
<div className="flex w-full">
|
|
<div className="mr-2">
|
|
<Avatar shape="square" src={manifest.icon} name={manifest.label} />
|
|
</div>
|
|
|
|
<div className="flex flex-col flex-1">
|
|
<div className="font-bold">{manifest.label}</div>
|
|
|
|
<div className="text-xs text-gray-300 text-opacity-50">
|
|
{manifest.name}
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-auto">{manifest.description}</div>
|
|
|
|
<div className="mt-1 text-right">
|
|
{builtin ? (
|
|
<Button type="primary" disabled={true}>
|
|
{t('已安装')}
|
|
</Button>
|
|
) : installed ? (
|
|
<Button type="primary">{t('已安装')}</Button>
|
|
) : (
|
|
<Button
|
|
type="primary"
|
|
loading={loading}
|
|
onClick={handleInstallPlugin}
|
|
>
|
|
{t('安装')}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
PluginStoreItem.displayName = 'PluginStoreItem';
|