mirror of
https://github.com/NapNeko/NapCatQQ.git
synced 2026-02-06 13:05:09 +00:00
feat(webui): 插件卡片添加仓库主页跳转功能 (#1569)
* 为插件接口添加主页字段并优化展示组件 本次更新在 PluginPackageJson 接口及相关类型中新增了一个可选的 `homepage` 字段,允许插件指定其主页 URL。插件展示组件已更新,新增了一个指向主页的 GitHub 链接按钮,以提升用户对插件资源的访问便捷性。此外,PluginConfigModal 中新增了一个问题反馈按钮,该按钮直接链接到插件的主页,从而优化了用户支持与反馈机制。 * 优化标题区域样式,确保长标题正确截断显示省略号 * 移除插件相关接口中的可选主页字段,并优化展示组件以简化代码结构。更新了插件展示卡片的样式,确保更好的用户体验。 * 修改 PluginStoreCard 组件,新增 displayId 优化包名展示,并调整卡片样式以提升响应式表现。更新不同屏幕尺寸的最大宽度设置,确保包名截断显示且悬停可查看完整内容。 * Revert "修改 PluginStoreCard 组件,新增 displayId 优化包名展示,并调整卡片样式以提升响应式表现。更新不同屏幕尺寸的最大宽度设置,确保包名截断显示且悬停可查看完整内容。" This reverts commit0301421bc8. * Revert "移除插件相关接口中的可选主页字段,并优化展示组件以简化代码结构。更新了插件展示卡片的样式,确保更好的用户体验。" This reverts commit1d22f19fa6. * Revert "优化标题区域样式,确保长标题正确截断显示省略号" This reverts commit8a0912b5b9. * Revert "为插件接口添加主页字段并优化展示组件" This reverts commit4e5dddde90. * 再说丑我打死你 --------- Co-authored-by: 手瓜一十雪 <nanaeonn@outlook.com>
This commit is contained in:
@@ -4,7 +4,7 @@ import clsx from 'clsx';
|
|||||||
import key from '@/const/key';
|
import key from '@/const/key';
|
||||||
|
|
||||||
export interface ContainerProps {
|
export interface ContainerProps {
|
||||||
title: string;
|
title: React.ReactNode;
|
||||||
tag?: React.ReactNode;
|
tag?: React.ReactNode;
|
||||||
action: React.ReactNode;
|
action: React.ReactNode;
|
||||||
enableSwitch: React.ReactNode;
|
enableSwitch: React.ReactNode;
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { Button } from '@heroui/button';
|
import { Button } from '@heroui/button';
|
||||||
import { Chip } from '@heroui/chip';
|
import { Chip } from '@heroui/chip';
|
||||||
|
import { Tooltip } from '@heroui/tooltip';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { IoMdDownload, IoMdRefresh, IoMdCheckmarkCircle } from 'react-icons/io';
|
import { IoMdDownload, IoMdRefresh, IoMdCheckmarkCircle } from 'react-icons/io';
|
||||||
|
|
||||||
@@ -20,7 +21,7 @@ const PluginStoreCard: React.FC<PluginStoreCardProps> = ({
|
|||||||
onInstall,
|
onInstall,
|
||||||
installStatus = 'not-installed',
|
installStatus = 'not-installed',
|
||||||
}) => {
|
}) => {
|
||||||
const { name, version, author, description, tags, id } = data;
|
const { name, version, author, description, tags, id, homepage } = data;
|
||||||
const [processing, setProcessing] = useState(false);
|
const [processing, setProcessing] = useState(false);
|
||||||
|
|
||||||
const handleInstall = () => {
|
const handleInstall = () => {
|
||||||
@@ -53,11 +54,31 @@ const PluginStoreCard: React.FC<PluginStoreCardProps> = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const buttonConfig = getButtonConfig();
|
const buttonConfig = getButtonConfig();
|
||||||
|
const titleContent = homepage ? (
|
||||||
|
<Tooltip
|
||||||
|
content="跳转到插件主页"
|
||||||
|
placement="top"
|
||||||
|
showArrow
|
||||||
|
offset={8}
|
||||||
|
delay={200}
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href={homepage}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
className="text-inherit inline-block bg-no-repeat bg-left-bottom [background-image:repeating-linear-gradient(90deg,currentColor_0_2px,transparent_2px_5px)] [background-size:0%_2px] hover:[background-size:100%_2px] transition-[background-size] duration-200 ease-out"
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</a>
|
||||||
|
</Tooltip>
|
||||||
|
) : (
|
||||||
|
name
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DisplayCardContainer
|
<DisplayCardContainer
|
||||||
className='w-full max-w-[420px]'
|
className='w-full max-w-[420px]'
|
||||||
title={name}
|
title={titleContent}
|
||||||
tag={
|
tag={
|
||||||
<div className="ml-auto flex items-center gap-1">
|
<div className="ml-auto flex items-center gap-1">
|
||||||
{installStatus === 'installed' && (
|
{installStatus === 'installed' && (
|
||||||
|
|||||||
Reference in New Issue
Block a user