为插件接口添加主页字段并优化展示组件

本次更新在 PluginPackageJson 接口及相关类型中新增了一个可选的 `homepage` 字段，允许插件指定其主页 URL。插件展示组件已更新，新增了一个指向主页的 GitHub 链接按钮，以提升用户对插件资源的访问便捷性。此外，PluginConfigModal 中新增了一个问题反馈按钮，该按钮直接链接到插件的主页，从而优化了用户支持与反馈机制。

packages/napcat-onebot/network/plugin/types.ts

@@ -13,6 +13,7 @@ export interface PluginPackageJson {
   main?: string;
   description?: string;
   author?: string;
+  homepage?: string;
 }
 
 // ==================== 插件配置 Schema ====================

packages/napcat-webui-backend/src/api/Plugin.ts

@@ -72,6 +72,7 @@ export const GetPluginListHandler: RequestHandler = async (_req, res) => {
     version: string;
     description: string;
     author: string;
+    homepage?: string;
     status: string;
     hasConfig: boolean;
     hasPages: boolean;
@@ -109,6 +110,7 @@ export const GetPluginListHandler: RequestHandler = async (_req, res) => {
       version: p.version || '0.0.0',
       description: p.packageJson?.description || '',
       author: p.packageJson?.author || '',
+      homepage: p.packageJson?.homepage,
       status,
       hasConfig: !!(p.runtime.module?.plugin_config_schema || p.runtime.module?.plugin_config_ui),
       hasPages

packages/napcat-webui-frontend/src/components/display_card/container.tsx

@@ -22,6 +22,7 @@ export interface DisplayCardProps {
 
 const DisplayCardContainer: React.FC<ContainerProps> = ({
   title: _title,
+  tag,
   action,
   enableSwitch,
   children,
@@ -45,7 +46,8 @@ const DisplayCardContainer: React.FC<ContainerProps> = ({
             </span>
           </div>
         </div>
-        <div className='flex-shrink-0'>{enableSwitch}</div>
+        {tag && <div className='flex-shrink-0'>{tag}</div>}
+        {enableSwitch && <div className='flex-shrink-0'>{enableSwitch}</div>}
       </CardHeader>
       <CardBody className='px-4 py-2 text-sm text-default-600'>{children}</CardBody>
       <CardFooter className='px-4 pb-4 pt-2'>{action}</CardFooter>

packages/napcat-webui-frontend/src/components/display_card/plugin_card.tsx

@@ -1,6 +1,7 @@
 import { Button } from '@heroui/button';
 import { Switch } from '@heroui/switch';
 import { Chip } from '@heroui/chip';
+import { Tooltip } from '@heroui/tooltip';
 
 import { useState } from 'react';
 import { MdDeleteForever, MdSettings } from 'react-icons/md';
@@ -41,28 +42,27 @@ const PluginDisplayCard: React.FC<PluginDisplayCardProps> = ({
     <DisplayCardContainer
       className='w-full max-w-[420px]'
       action={
-        <div className='flex flex-col gap-2 w-full'>
-          <div className='flex gap-2 w-full'>
+        <div className='flex gap-2 w-full'>
+          <Tooltip content="卸载">
             <Button
-              fullWidth
+              isIconOnly
               radius='full'
               size='sm'
               variant='flat'
-              className='flex-1 bg-default-100 dark:bg-default-50 text-default-600 font-medium hover:bg-danger/20 hover:text-danger transition-colors'
-              startContent={<MdDeleteForever size={16} />}
+              className='bg-default-100 dark:bg-default-50 text-default-600 hover:bg-danger/20 hover:text-danger transition-colors'
               onPress={handleUninstall}
               isDisabled={processing}
             >
-              卸载
+              <MdDeleteForever size={16} />
             </Button>
-          </div>
+          </Tooltip>
           {hasConfig && (
             <Button
               fullWidth
               radius='full'
               size='sm'
               variant='flat'
-              className='bg-default-100 dark:bg-default-50 text-default-600 font-medium hover:bg-secondary/20 hover:text-secondary transition-colors'
+              className='flex-1 bg-default-100 dark:bg-default-50 text-default-600 font-medium hover:bg-secondary/20 hover:text-secondary transition-colors'
               startContent={<MdSettings size={16} />}
               onPress={onConfig}
             >

packages/napcat-webui-frontend/src/components/display_card/plugin_store_card.tsx

@@ -1,7 +1,9 @@
 import { Button } from '@heroui/button';
 import { Chip } from '@heroui/chip';
+import { Tooltip } from '@heroui/tooltip';
 import { useState } from 'react';
 import { IoMdDownload, IoMdRefresh, IoMdCheckmarkCircle } from 'react-icons/io';
+import { FaGithub } from 'react-icons/fa';
 
 import DisplayCardContainer from './container';
 import { PluginStoreItem } from '@/types/plugin-store';
@@ -20,7 +22,7 @@ const PluginStoreCard: React.FC<PluginStoreCardProps> = ({
   onInstall,
   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 handleInstall = () => {
@@ -60,6 +62,19 @@ const PluginStoreCard: React.FC<PluginStoreCardProps> = ({
       title={name}
       tag={
         <div className="ml-auto flex items-center gap-1">
+          {homepage && (
+            <Tooltip content="仓库主页">
+              <Button
+                isIconOnly
+                size='sm'
+                variant='light'
+                className='min-w-6 w-6 h-6 text-default-500 hover:text-default-700'
+                onPress={() => window.open(homepage, '_blank')}
+              >
+                <FaGithub size={14} />
+              </Button>
+            </Tooltip>
+          )}
           {installStatus === 'installed' && (
             <Chip
               color="success"
@@ -104,51 +119,40 @@ const PluginStoreCard: React.FC<PluginStoreCardProps> = ({
         </Button>
       }
     >
-      <div className='grid grid-cols-2 gap-3'>
-        <div className='flex flex-col gap-1 p-3 bg-default-100/50 dark:bg-white/10 rounded-xl border border-transparent hover:border-default-200 transition-colors'>
-          <span className='text-xs text-default-500 dark:text-white/50 font-medium tracking-wide'>
-            作者
-          </span>
-          <div className='text-sm font-medium text-default-700 dark:text-white/90 truncate'>
-            {author || '未知'}
-          </div>
+      <div className='flex flex-col gap-2 h-[120px]'>
+        {/* 作者和包名 */}
+        <div className='flex items-center gap-2 text-xs text-default-500 dark:text-white/50'>
+          <span>作者: <span className='text-default-700 dark:text-white/80'>{author || '未知'}</span></span>
+          <span className='text-default-300'>·</span>
+          <Tooltip content={id}>
+            <span className='truncate max-w-[150px]'>{id}</span>
+          </Tooltip>
         </div>
-        <div className='flex flex-col gap-1 p-3 bg-default-100/50 dark:bg-white/10 rounded-xl border border-transparent hover:border-default-200 transition-colors'>
-          <span className='text-xs text-default-500 dark:text-white/50 font-medium tracking-wide'>
-            版本
-          </span>
-          <div className='text-sm font-medium text-default-700 dark:text-white/90 truncate'>
-            v{version}
-          </div>
-        </div>
-        <div className='col-span-2 flex flex-col gap-1 p-3 bg-default-100/50 dark:bg-white/10 rounded-xl border border-transparent hover:border-default-200 transition-colors'>
-          <span className='text-xs text-default-500 dark:text-white/50 font-medium tracking-wide'>
-            描述
-          </span>
-          <div className='text-sm font-medium text-default-700 dark:text-white/90 break-words line-clamp-2 h-10 overflow-hidden'>
+
+        {/* 描述 */}
+        <div className='flex-1 p-3 bg-default-100/50 dark:bg-white/10 rounded-xl'>
+          <div className='text-sm text-default-700 dark:text-white/90 break-words line-clamp-2'>
             {description || '暂无描述'}
           </div>
         </div>
-        {id && (
-          <div className='flex flex-col gap-1 p-3 bg-default-100/50 dark:bg-white/10 rounded-xl border border-transparent hover:border-default-200 transition-colors'>
-            <span className='text-xs text-default-500 dark:text-white/50 font-medium tracking-wide'>
-              包名
-            </span>
-            <div className='text-sm font-medium text-default-700 dark:text-white/90 break-words line-clamp-2 h-10 overflow-hidden'>
-              {id || '包名'}
-            </div>
-          </div>
-        )}
-        {tags && tags.length > 0 && (
-          <div className='flex flex-col gap-1 p-3 bg-default-100/50 dark:bg-white/10 rounded-xl border border-transparent hover:border-default-200 transition-colors'>
-            <span className='text-xs text-default-500 dark:text-white/50 font-medium tracking-wide'>
-              标签
-            </span>
-            <div className='text-sm font-medium text-default-700 dark:text-white/90 truncate'>
-              {tags.slice(0, 2).join(' · ')}
-            </div>
-          </div>
-        )}
+
+        {/* 标签 */}
+        <div className='flex flex-wrap gap-1 min-h-[24px]'>
+          {tags && tags.length > 0 ? (
+            tags.slice(0, 3).map((tag, index) => (
+              <Chip
+                key={index}
+                size='sm'
+                variant='flat'
+                className='text-xs'
+              >
+                {tag}
+              </Chip>
+            ))
+          ) : (
+            <span className='text-xs text-default-400'>暂无标签</span>
+          )}
+        </div>
       </div>
     </DisplayCardContainer>
   );

packages/napcat-webui-frontend/src/controllers/plugin_manager.ts

@@ -16,6 +16,8 @@ export interface PluginItem {
   description: string;
   /** 作者 */
   author: string;
+  /** 主页链接 */
+  homepage?: string;
   /** 状态: active-运行中, disabled-已禁用, stopped-已停止 */
   status: PluginStatus;
   /** 是否有配置项 */

packages/napcat-webui-frontend/src/pages/dashboard/plugin.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@heroui/button';
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef, useMemo } from 'react';
 import toast from 'react-hot-toast';
 import { IoMdRefresh } from 'react-icons/io';
 import { FiUpload } from 'react-icons/fi';
@@ -10,9 +10,11 @@ import PluginDisplayCard from '@/components/display_card/plugin_card';
 import PluginManager, { PluginItem } from '@/controllers/plugin_manager';
 import useDialog from '@/hooks/use-dialog';
 import PluginConfigModal from '@/pages/dashboard/plugin_config_modal';
+import { PluginStoreItem } from '@/types/plugin-store';
 
 export default function PluginPage () {
   const [plugins, setPlugins] = useState<PluginItem[]>([]);
+  const [storePlugins, setStorePlugins] = useState<PluginStoreItem[]>([]);
   const [loading, setLoading] = useState(false);
   const [pluginManagerNotFound, setPluginManagerNotFound] = useState(false);
   const dialog = useDialog();
@@ -25,7 +27,11 @@ export default function PluginPage () {
     setLoading(true);
     setPluginManagerNotFound(false);
     try {
-      const listResult = await PluginManager.getPluginList();
+      // 并行加载本地插件列表和商店插件列表
+      const [listResult, storeResult] = await Promise.all([
+        PluginManager.getPluginList(),
+        PluginManager.getPluginStoreList().catch(() => ({ plugins: [] }))
+      ]);
 
       if (listResult.pluginManagerNotFound) {
         setPluginManagerNotFound(true);
@@ -33,6 +39,7 @@ export default function PluginPage () {
       } else {
         setPlugins(listResult.plugins);
       }
+      setStorePlugins(storeResult.plugins || []);
     } catch (e: any) {
       toast.error(e.message);
     } finally {
@@ -40,6 +47,25 @@ export default function PluginPage () {
     }
   };
 
+  // 创建一个 Map 用于快速查找商店插件的 homepage
+  const storeHomepageMap = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const plugin of storePlugins) {
+      if (plugin.homepage) {
+        map.set(plugin.id, plugin.homepage);
+      }
+    }
+    return map;
+  }, [storePlugins]);
+
+  // 合并本地插件和商店数据中的 homepage
+  const pluginsWithHomepage = useMemo(() => {
+    return plugins.map(plugin => ({
+      ...plugin,
+      homepage: plugin.homepage || storeHomepageMap.get(plugin.id)
+    }));
+  }, [plugins, storeHomepageMap]);
+
   useEffect(() => {
     loadPlugins();
   }, []);
@@ -172,6 +198,7 @@ export default function PluginPage () {
           isOpen={isOpen}
           onOpenChange={onOpenChange}
           pluginId={currentPluginId}
+          homepage={storeHomepageMap.get(currentPluginId)}
         />
 
         <div className='flex mb-6 items-center gap-4'>
@@ -211,11 +238,11 @@ export default function PluginPage () {
               插件管理器未加载，请检查 plugins 目录是否存在
             </p>
           </div>
-        ) : plugins.length === 0 ? (
+        ) : pluginsWithHomepage.length === 0 ? (
           <div className="text-default-400">暂时没有安装插件</div>
         ) : (
           <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 justify-start items-stretch gap-x-2 gap-y-4'>
-            {plugins.map(plugin => (
+            {pluginsWithHomepage.map(plugin => (
               <PluginDisplayCard
                 key={plugin.id}
                 data={plugin}

packages/napcat-webui-frontend/src/pages/dashboard/plugin_config_modal.tsx

@@ -3,9 +3,11 @@ import { Button } from '@heroui/button';
 import { Input } from '@heroui/input';
 import { Select, SelectItem } from '@heroui/select';
 import { Switch } from '@heroui/switch';
+import { Tooltip } from '@heroui/tooltip';
 import { useEffect, useState, useRef, useCallback } from 'react';
 import toast from 'react-hot-toast';
 import { EventSourcePolyfill } from 'event-source-polyfill';
+import { IoMdOpen } from 'react-icons/io';
 import PluginManager, { PluginConfigSchemaItem } from '@/controllers/plugin_manager';
 import key from '@/const/key';
 
@@ -14,6 +16,8 @@ interface Props {
   onOpenChange: () => void;
   /** 插件包名 (id) */
   pluginId: string;
+  /** 插件主页 URL */
+  homepage?: string;
 }
 
 /** Schema 更新事件类型 */
@@ -25,7 +29,7 @@ interface SchemaUpdateEvent {
   afterKey?: string;
 }
 
-export default function PluginConfigModal ({ isOpen, onOpenChange, pluginId }: Props) {
+export default function PluginConfigModal ({ isOpen, onOpenChange, pluginId, homepage }: Props) {
   const [loading, setLoading] = useState(false);
   const [schema, setSchema] = useState<PluginConfigSchemaItem[]>([]);
   const [config, setConfig] = useState<Record<string, unknown>>({});
@@ -373,6 +377,21 @@ export default function PluginConfigModal ({ isOpen, onOpenChange, pluginId }: P
               )}
             </ModalBody>
             <ModalFooter>
+              {homepage && (
+                <Tooltip content="反馈问题">
+                  <Button
+                    isIconOnly
+                    variant="light"
+                    onPress={() => {
+                      const issueUrl = homepage.includes('github.com') ? `${homepage}/issues` : homepage;
+                      window.open(issueUrl, '_blank');
+                    }}
+                    className="mr-auto"
+                  >
+                    <IoMdOpen size={18} />
+                  </Button>
+                </Tooltip>
+              )}
               <Button color="danger" variant="light" onPress={onClose}>
                 Close
               </Button>