feat: 插件中心从服务端拉取插件列表

shared/cache/cache.ts

@@ -1,5 +1,6 @@
 import { ChatConverseInfo, fetchConverseInfo } from '../model/converse';
 import { findGroupInviteByCode, GroupInvite } from '../model/group';
+import { fetchRegistryPlugins } from '../model/plugin';
 import { fetchUserInfo, UserBaseInfo } from '../model/user';
 import { queryClient } from './index';
 
@@ -46,3 +47,18 @@ export async function getCachedGroupInviteInfo(
 
   return data;
 }
+
+/**
+ * 获取缓存的插件列表
+ */
+export async function getCachedRegistryPlugins() {
+  const data = await queryClient.fetchQuery(
+    ['pluginRegistry'],
+    () => fetchRegistryPlugins(),
+    {
+      staleTime: 2 * 60 * 60 * 1000, // 缓存2小时
+    }
+  );
+
+  return data;
+}

shared/index.tsx

@@ -5,7 +5,11 @@ export { createSocket } from './api/socket';
 export type { AppSocket } from './api/socket';
 
 // cache
-export { getCachedUserInfo, getCachedGroupInviteInfo } from './cache/cache';
+export {
+  getCachedUserInfo,
+  getCachedGroupInviteInfo,
+  getCachedRegistryPlugins,
+} from './cache/cache';
 export { useCachedUserInfo } from './cache/useCache';
 
 // components

shared/model/plugin.ts

@@ -1,3 +1,5 @@
+import { request } from '../api/request';
+
 export interface PluginManifest {
   /**
    * 插件用于显示的名称
@@ -46,3 +48,9 @@ export interface PluginManifest {
    */
   requireRestart: boolean;
 }
+
+export async function fetchRegistryPlugins(): Promise<PluginManifest[]> {
+  const { data } = await request.get('/api/plugin/registry/list');
+
+  return data;
+}

web/src/plugin/PluginStore/Item.tsx

@@ -15,9 +15,9 @@ import { pluginManager } from '../manager';
 export const PluginStoreItem: React.FC<{
   manifest: PluginManifest;
   installed: boolean;
-  builtin: boolean;
+  builtin?: boolean;
 }> = React.memo((props) => {
-  const { manifest, builtin } = props;
+  const { manifest, builtin = false } = props;
   const [installed, setInstalled] = useState(props.installed);
 
   const [{ loading }, handleInstallPlugin] = useAsyncRequest(async () => {

web/src/plugin/PluginStore/index.tsx

@@ -11,14 +11,30 @@ import { builtinPlugins } from '../builtin';
 import { pluginManager } from '../manager';
 import { PluginStoreItem } from './Item';
 
-export const PluginStore: React.FC = React.memo(() => {
-  const { loading, value: installedPluginList = [] } = useAsync(
+function usePluginStoreData() {
+  const { loading: loading1, value: installedPluginList = [] } = useAsync(
     async () => pluginManager.getInstalledPlugins(),
     []
   );
+  const { loading: loading2, value: allPlugins = [] } = useAsync(
+    async () => pluginManager.getRegistryPlugins(),
+    []
+  );
+
+  const loading = loading1 || loading2;
+
+  return {
+    loading,
+    installedPluginList,
+    allPlugins,
+  };
+}
+
+export const PluginStore: React.FC = React.memo(() => {
+  const { loading, installedPluginList, allPlugins } = usePluginStoreData();
 
   if (loading) {
-    return <LoadingSpinner tip={t('正在加载已安装插件')} />;
+    return <LoadingSpinner tip={t('正在加载插件列表')} />;
   }
 
   const installedPluginNameList = installedPluginList.map((p) => p.name);
@@ -43,7 +59,16 @@ export const PluginStore: React.FC = React.memo(() => {
 
           <Divider orientation="left">{t('插件中心')}</Divider>
 
-          {/* TODO: 插件中心 */}
+          <div className="flex flex-wrap">
+            {allPlugins.map((plugin) => (
+              <div key={plugin.name} className="m-1">
+                <PluginStoreItem
+                  manifest={plugin}
+                  installed={installedPluginNameList.includes(plugin.name)}
+                />
+              </div>
+            ))}
+          </div>
         </PillTabPane>
 
         <PillTabPane key="2" tab={t('已安装')}>

web/src/plugin/loader.ts

@@ -1,5 +1,5 @@
-import { initMiniStar, regDependency, regSharedModule } from 'mini-star';
-import { builtinPlugins } from './builtin';
+import { regDependency, regSharedModule } from 'mini-star';
+import { pluginManager } from './manager';
 
 /**
  * 初始化插件
@@ -8,14 +8,7 @@ export function initPlugins(): Promise<void> {
   registerDependencies();
   registerModules();
 
-  const plugins = builtinPlugins.map(({ name, url }) => ({
-    name,
-    url,
-  }));
-
-  return initMiniStar({
-    plugins,
-  });
+  return pluginManager.initPlugins();
 }
 
 function registerDependencies() {

web/src/plugin/manager.ts

@@ -1,4 +1,8 @@
-import { getStorage, PluginManifest } from 'tailchat-shared';
+import {
+  getCachedRegistryPlugins,
+  getStorage,
+  PluginManifest,
+} from 'tailchat-shared';
 import { initMiniStar, loadSinglePlugin } from 'mini-star';
 import _once from 'lodash/once';
 import { builtinPlugins } from './builtin';
@@ -7,7 +11,7 @@ class PluginManager {
   /**
    * 存储插件列表的Key常量
    */
-  static STORE_KEY = '__installed_plugins';
+  static STORE_KEY = '$TailchatInstalledPlugins';
 
   /**
    * 初始化插件
@@ -40,6 +44,13 @@ class PluginManager {
     return plugins;
   }
 
+  /**
+   * 获取所有插件列表
+   */
+  async getRegistryPlugins(): Promise<PluginManifest[]> {
+    return await getCachedRegistryPlugins();
+  }
+
   /**
    * 安装插件
    */