@bbki.ng/site 5.7.0 → 5.8.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @bbki.ng/site
 
+## 5.8.1
+
+### Patch Changes
+
+- 0790fd3: add notification plugin
+
+## 5.8.0
+
+### Minor Changes
+
+- c920d33: add service registry
+
 ## 5.7.0
 
 ### Minor Changes

package/index.html

@@ -13,17 +13,6 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
     <link rel="mask-icon" href="/favicon.svg" color="#FFFFFF" />
     <meta name="theme-color" content="#ffffff" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <!-- <link
-      href="/google-font.css"
-      rel="stylesheet"
-      media="print"
-      onload="
-        this.media = 'all';
-        this.onload = null;
-      "
-    /> -->
     <style>
       bb-img:not(:defined) {
         display: block;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "5.7.0",
+  "version": "5.8.1",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "type": "module",
@@ -13,6 +13,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-router-dom": "6",
+    "sonner": "^2.0.7",
     "swr": "^2.2.5",
     "@bbki.ng/ui": "0.2.19"
   },
@@ -23,8 +24,8 @@
     "@mdx-js/react": "^3.0.0",
     "@mdx-js/rollup": "^3.0.0",
     "@tailwindcss/postcss": "4.1.17",
-    "@tailwindcss/vite": "4.1.17",
     "@tailwindcss/typography": "^0.5.0",
+    "@tailwindcss/vite": "4.1.17",
     "@types/node": "^20.0.0",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",

package/src/app/app.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
-import { NotFound } from '@bbki.ng/ui';
 
 import { BotRedirect } from '#/app/components/bot';
 import { BBContext } from '#/app/context/bbcontext';
@@ -28,7 +27,7 @@ const AppRoutes = () => {
             element={<Slot name="route" data={route} />}
           />
         ))}
-        <Route path="*" element={pluginEntries?.length ? <NotFound /> : null} />
+        <Route path="*" element={null} />
       </Route>
     </Routes>
   );

package/src/core/components/SlotComp.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 
-import { SlotName } from '#/types/slots';
-
 import { useSlotComp } from '../hooks/useSlotComp';
+import { SystemSlotName } from '../shared-service/contract/IUIService';
 
 export interface ISlotProps {
-  name: SlotName;
+  name: SystemSlotName;
   data?: unknown;
 
   placeholder?: React.ReactNode;

package/src/core/hooks/useMiddlewareTransData.ts

@@ -1,10 +1,10 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
 
-import { registry } from '#/core/registry';
-import type { HookPoint } from '#/types/slots';
+import { SystemUIService } from '../plugin-system/services/systemUIService';
+import { SystemDataHookPoint } from '../shared-service/contract/IUIService';
 
 export interface UseMiddlewareTransDataOptions {
-  hookPoint: HookPoint;
+  hookPoint: SystemDataHookPoint;
   onMiddlewareChange?: () => void; // 通知外部，由外部决定是否 run
 }
 
@@ -26,7 +26,7 @@ export function useMiddlewareRunner<T>({
       setLoading(true);
       setError(null);
       try {
-        const result = await registry.runMiddleware(hookPoint, inputData);
+        const result = await SystemUIService.getInstance().runMiddlewares(hookPoint, inputData);
         return result;
       } catch (err) {
         const error = err instanceof Error ? err : new Error(String(err));
@@ -41,8 +41,10 @@ export function useMiddlewareRunner<T>({
 
   // 仅通知，不执行
   useEffect(() => {
-    const unsubscribe = registry.subscribeMiddleware(hookPoint, () => {
-      onMiddlewareChange?.();
+    const unsubscribe = SystemUIService.getInstance().subscribeMiddlewareChange(hook => {
+      if (hook === hookPoint) {
+        onMiddlewareChange?.();
+      }
     });
 
     return () => {
@@ -53,7 +55,10 @@ export function useMiddlewareRunner<T>({
   return { loading, error, run };
 }
 
-export const useMiddlewareTransformedData = <T>(hookPoint: HookPoint, defaultValue: T) => {
+export const useMiddlewareTransformedData = <T>(
+  hookPoint: SystemDataHookPoint,
+  defaultValue: T
+) => {
   const [result, setResult] = useState<T>(defaultValue);
 
   const runRef = useRef<(input: T) => Promise<T>>(() => Promise.resolve(defaultValue));

package/src/core/hooks/useSlotComp.ts

@@ -1,19 +1,20 @@
 import React, { useEffect, useState } from 'react';
 
-import { IComPropsRegisteredToSlot, SlotName } from '#/types/slots';
+import { IComPropsRegisteredToSlot } from '#/types/slots';
 
-import { registry } from '../registry';
+import { SystemUIService } from '../plugin-system/services/systemUIService';
+import { SystemSlotName } from '../shared-service/contract/IUIService';
 
-export const useSlotComp = (slotName: SlotName) => {
+export const useSlotComp = (slotName: SystemSlotName) => {
   const [components, setComponents] = useState<React.ComponentType<IComPropsRegisteredToSlot>[]>(
-    () => registry.getComponents(slotName)
+    () => SystemUIService.getInstance().getComponents(slotName)
   );
 
   useEffect(() => {
-    setComponents(registry.getComponents(slotName));
+    setComponents(SystemUIService.getInstance().getComponents(slotName));
 
-    const unsubscribe = registry.subscribe(() => {
-      const comps = registry.getComponents(slotName);
+    const unsubscribe = SystemUIService.getInstance().subscribeSlotChange(() => {
+      const comps = SystemUIService.getInstance().getComponents(slotName);
       setComponents(comps);
     });
 

package/src/core/hooks/use_plugins.ts

@@ -1,26 +1,28 @@
 import { useEffect, useMemo, useState } from 'react';
 
 import { useGlobalLoading } from '#/app/hooks/use_global_loading';
-import { pluginManager } from '#/core/pluginManager';
+import { pluginManager } from '#/core/plugin-system/pluginManager';
 import { PluginID } from '#/types/plugin';
 
-import { PluginManifestService } from '../pluginManifestService';
-import { PluginStore } from '../pluginStore';
+import { PluginManifestService } from '../plugin-system/pluginManifestService';
+import { PluginStore } from '../plugin-system/pluginStore';
+import { CoreService } from '../plugin-system/services/coreService';
 
 const usePluginsLoading = () => {
   const { setGlobalLoading, isLoading } = useGlobalLoading();
 
   useEffect(() => {
-    pluginManager.notifySiteLoadingChanged(isLoading);
+    CoreService.getInstance().setSiteLoading(isLoading);
   }, [isLoading]);
 
   useEffect(() => {
     let unregister: (() => void) | undefined;
-    const unscribe = pluginManager.subscribePluginLoading(payload => {
+    const unsubscribe = CoreService.getInstance().subscribePluginLoading(payload => {
       unregister = setGlobalLoading(payload.id, payload.loading);
     });
+
     return () => {
-      unscribe();
+      unsubscribe();
       unregister?.();
     };
   }, [setGlobalLoading]);
@@ -56,17 +58,28 @@ export const usePlugins = () => {
         if (cancelled) {
           return;
         }
-        Promise.all(pluginIds.map(id => pluginManager.loadPlugin(id)))
-          .then(() => {
+        const loadNext = (index: number) => {
+          if (cancelled || index >= pluginIds.length) {
             if (!cancelled) {
               setDone(true);
             }
-          })
-          .catch(error => {
-            if (!cancelled) {
-              console.error('Error loading plugins:', error);
-            }
-          });
+            return;
+          }
+
+          const id = pluginIds[index];
+          pluginManager
+            .loadPlugin(id)
+            .then(() => loadNext(index + 1))
+            .catch(error => {
+              if (!cancelled) {
+                console.error(`Error loading plugin ${id}:`, error);
+                // 即使某个插件加载失败，也继续加载下一个
+                loadNext(index + 1);
+              }
+            });
+        };
+
+        loadNext(0);
       })
       .catch(error => {
         if (!cancelled) {

package/src/{plugins → core/plugin-system}/manifest.ts

@@ -26,6 +26,7 @@ export const FALLBACK_MANIFEST: Array<IPluginManifestEntry> = [
     version: '0.1.0',
     description:
       '提供额外的页面跳转链接。例如在标题列表末尾添加一个 "cd ~" 的选项，点击后跳转到主页',
+    dependencies: ['blog'],
   },
   {
     name: '特效',
@@ -33,17 +34,12 @@ export const FALLBACK_MANIFEST: Array<IPluginManifestEntry> = [
     version: '0.1.0',
     description: '提供一些额外的视觉效果。例如版本、设备信息水印，加载状态螺旋线、背景纹理等',
   },
-  // {
-  //   name: 'extra-entry',
-  //   id: 'extra-entry',
-  //   version: '0.1.0',
-  //   description: 'Provides extra entries for cover and extended routes.',
-  // },
   {
     name: '小乌鸦',
     id: 'xwy',
     version: '0.1.0',
     description: '为小乌鸦合集实现定制功能或者样式的插件',
+    dependencies: ['blog'],
   },
   {
     name: '博客',
@@ -51,4 +47,10 @@ export const FALLBACK_MANIFEST: Array<IPluginManifestEntry> = [
     version: '0.1.0',
     description: '一个简单的博客系统，支持 Markdown 格式的文章',
   },
+  {
+    name: '通知',
+    id: 'notification',
+    version: '0.1.0',
+    description: '接收通知',
+  },
 ];

package/src/core/plugin-system/pluginManager.ts

@@ -0,0 +1,118 @@
+import { IHostContext } from '#/types/hostApi';
+import { IPlugin, PluginID, PluginPerm } from '#/types/plugin';
+
+import { AdminPluginIDSet } from '../const';
+import { ServiceRegistry } from '../shared-service/service-registry';
+
+import { PluginStore } from './pluginStore';
+import { CoreService } from './services/coreService';
+import { SystemUIService } from './services/systemUIService';
+
+const pluginModules = import.meta.glob('../../plugins/*/index.ts');
+
+class PluginManager {
+  private activePlugins: Map<string, IPlugin> = new Map();
+
+  private constructor() {
+    ServiceRegistry.getInstance().register('core:baseService', CoreService.getInstance());
+    ServiceRegistry.getInstance().register('core:uiService', SystemUIService.getInstance());
+  }
+
+  private static instance: PluginManager;
+
+  private createHostContext(perm: PluginPerm = 'guest'): IHostContext {
+    const adminCtx =
+      perm === 'admin'
+        ? {
+            store: PluginStore.getInstance(),
+          }
+        : {};
+    return {
+      ...adminCtx,
+      service: ServiceRegistry.getInstance(),
+    };
+  }
+
+  private loading = new Set<string>();
+
+  static getInstance() {
+    if (!PluginManager.instance) {
+      PluginManager.instance = new PluginManager();
+    }
+    return PluginManager.instance;
+  }
+
+  // enable abort ctrl
+  async loadPlugin(pluginId: PluginID) {
+    if (this.activePlugins.has(pluginId)) {
+      console.warn(`Plugin ${pluginId} is already loaded.`);
+      return;
+    }
+
+    if (this.loading.has(pluginId)) {
+      console.warn(`Plugin ${pluginId} is loading...`);
+      return;
+    }
+
+    // try load plugin
+    this.loading.add(pluginId);
+    CoreService.getInstance().setLoading(pluginId, true);
+
+    const modulePath = `../../plugins/${pluginId}/index.ts`;
+    const moduleLoader = pluginModules[modulePath];
+    if (!moduleLoader) {
+      console.error(`Plugin ${pluginId} not found in registry`);
+
+      this.loading.delete(pluginId);
+      CoreService.getInstance().setLoading(pluginId, false);
+
+      return;
+    }
+
+    try {
+      const module = (await moduleLoader()) as {
+        default: IPlugin;
+      };
+
+      const p: IPlugin = module.default;
+
+      const perm = p.getMeta().perm || 'guest';
+      if (perm === 'admin' && !AdminPluginIDSet.has(pluginId)) {
+        console.error(`Plugin ${pluginId} requires admin permission, but it's not trusted.`);
+        return;
+      }
+
+      const ctx = this.createHostContext(perm);
+
+      if (p.onInstall) {
+        await p.onInstall(ctx);
+      }
+
+      this.activePlugins.set(pluginId, p);
+    } catch (error) {
+      console.error(`Failed to load plugin ${pluginId}:`, error);
+    } finally {
+      this.loading.delete(pluginId);
+      CoreService.getInstance().setLoading(pluginId, false);
+    }
+  }
+
+  async disablePlugin(pluginId: PluginID) {
+    const plugin = this.activePlugins.get(pluginId);
+    if (!plugin) {
+      console.warn(`Plugin ${pluginId} is not loaded.`);
+      return;
+    }
+
+    if (plugin.onDisable) {
+      await plugin.onDisable();
+    }
+
+    this.activePlugins.delete(pluginId);
+
+    SystemUIService.getInstance().unregisterAllByPluginId(plugin.id);
+    CoreService.getInstance().notifyPluginUninstall(plugin.id);
+  }
+}
+
+export const pluginManager = PluginManager.getInstance();

package/src/core/{pluginManifestService.ts → plugin-system/pluginManifestService.ts}

@@ -1,18 +1,8 @@
 import { cfApiFetcher } from '#/app/utils';
-import { FALLBACK_MANIFEST } from '#/plugins/manifest';
+import { FALLBACK_MANIFEST } from '#/core/plugin-system/manifest';
 import { IPluginManifestEntry, PluginID } from '#/types/plugin';
 
-const KnownPluginIDSet = new Set<string>([
-  'sticker',
-  'xwy',
-  'extra-cd',
-  'extra-entry',
-  'store',
-  'now',
-  'default',
-  'fx',
-  'blog',
-]);
+const KnownPluginIDSet = new Set<string>(FALLBACK_MANIFEST.map(entry => entry.id));
 
 interface PluginsApiResponse {
   status: string;
@@ -23,7 +13,7 @@ interface PluginsApiResponse {
     description?: string;
     perm?: string;
     icon?: string;
-    dependencies?: string;
+    dependencies?: Array<PluginID>;
   }>;
 }
 
@@ -66,8 +56,7 @@ class PluginManifestService {
               let dependencies: PluginID[] | undefined;
               if (item.dependencies) {
                 try {
-                  const parsed = JSON.parse(item.dependencies) as string[];
-                  dependencies = parsed.filter((id): id is PluginID => KnownPluginIDSet.has(id));
+                  dependencies = item.dependencies.filter(p => KnownPluginIDSet.has(p));
                 } catch {
                   console.warn(
                     `[PluginManifestService] Failed to parse dependencies for plugin: ${item.id}`

package/src/core/plugin-system/pluginStore.ts

@@ -0,0 +1,196 @@
+import { IPluginStoreEntry, PluginID } from '#/types/plugin';
+
+import { pluginManager } from './pluginManager';
+import { PluginManifestService } from './pluginManifestService';
+
+export class PluginStore {
+  private static instance: PluginStore;
+
+  private installedSet: Set<PluginID> = new Set();
+
+  private constructor() {
+    this.parse();
+  }
+
+  private checkDep = (id: PluginID): boolean => {
+    const manifest = PluginManifestService.getInstance().getPlugin(id);
+    if (!manifest) {
+      console.warn(`[PluginStore] Manifest not found for plugin: ${id}`);
+      return false;
+    }
+
+    if (!manifest.dependencies || manifest.dependencies.length === 0) {
+      return true;
+    }
+
+    for (const depId of manifest.dependencies) {
+      if (!this.isPluginInstalled(depId)) {
+        console.warn(`[PluginStore] Dependency ${depId} for plugin ${id} is not installed`);
+        return false;
+      }
+    }
+
+    return true;
+  };
+
+  private parse = () => {
+    this.installedSet.clear();
+    const installedPluginsStr = localStorage.getItem('installed_plugins');
+    if (installedPluginsStr) {
+      try {
+        const entries = JSON.parse(installedPluginsStr) as Array<PluginID>;
+        entries.forEach(id => this.installedSet.add(id));
+      } catch (e) {
+        console.error('Failed to parse installed plugins from localStorage', e);
+      }
+    }
+
+    try {
+      this.ensureRightOrder(this.installedSet);
+    } catch (error) {
+      console.error('Failed to ensure correct plugin load order:', error);
+    }
+
+    return this.installedSet;
+  };
+
+  private buildDependencyGraph = (ids: Set<PluginID>): Map<PluginID, PluginID[]> => {
+    const graph = new Map<PluginID, PluginID[]>();
+    const manifest = PluginManifestService.getInstance().getAllPlugins();
+
+    ids.forEach(id => {
+      graph.set(id, []);
+    });
+
+    manifest.forEach(plugin => {
+      if (ids.has(plugin.id)) {
+        const deps = plugin.dependencies || [];
+        deps.forEach(dep => {
+          if (ids.has(dep)) {
+            if (!graph.has(dep)) {
+              graph.set(dep, []);
+            }
+            graph.get(dep)!.push(plugin.id);
+          }
+        });
+      }
+    });
+
+    return graph;
+  };
+
+  private topologicalSortKahn = (graph: Map<PluginID, PluginID[]>): PluginID[] => {
+    const inDegree = new Map<PluginID, number>();
+    graph.forEach((deps, plugin) => {
+      if (!inDegree.has(plugin)) {
+        inDegree.set(plugin, 0);
+      }
+      deps.forEach(dep => {
+        inDegree.set(dep, (inDegree.get(dep) || 0) + 1);
+      });
+    });
+
+    const queue: PluginID[] = [];
+    inDegree.forEach((degree, plugin) => {
+      if (degree === 0) {
+        queue.push(plugin);
+      }
+    });
+
+    const loadOrder: PluginID[] = [];
+    while (queue.length > 0) {
+      const current = queue.shift()!;
+      loadOrder.push(current);
+
+      const deps = graph.get(current) || [];
+      deps.forEach(dep => {
+        inDegree.set(dep, inDegree.get(dep)! - 1);
+        if (inDegree.get(dep) === 0) {
+          queue.push(dep);
+        }
+      });
+    }
+
+    if (loadOrder.length !== graph.size) {
+      throw new Error('Circular dependency detected among plugins');
+    }
+
+    return loadOrder;
+  };
+
+  private ensureRightOrder = (ids: Set<PluginID>) => {
+    const graph = this.buildDependencyGraph(ids);
+    const loadOrder = this.topologicalSortKahn(graph);
+
+    // write back to installedSet in the correct order without create a new Set to preserve reference
+    if (loadOrder.length === ids.size) {
+      this.installedSet.clear();
+      loadOrder.forEach(id => this.installedSet.add(id));
+    }
+  };
+
+  private stringify = () => {
+    localStorage.setItem('installed_plugins', JSON.stringify(Array.from(this.installedSet)));
+  };
+
+  getInstalledPlugins: () => Set<PluginID> = () => {
+    return this.parse();
+  };
+
+  async getAllPlugins(): Promise<Array<IPluginStoreEntry>> {
+    const installedPlugins = this.getInstalledPlugins();
+    await PluginManifestService.getInstance().fetch();
+    const manifest = PluginManifestService.getInstance().getAllPlugins();
+    return manifest.map(plugin => ({
+      ...plugin,
+      enabled: installedPlugins.has(plugin.id),
+    }));
+  }
+
+  isPluginInstalled: (id: PluginID) => boolean = id => {
+    return this.getInstalledPlugins().has(id);
+  };
+
+  getPlugin: (id: PluginID) => IPluginStoreEntry | undefined = id => {
+    const manifest = PluginManifestService.getInstance().getPlugin(id);
+    if (!manifest) {
+      return undefined;
+    }
+
+    return {
+      ...manifest,
+      enabled: this.isPluginInstalled(id),
+    };
+  };
+
+  installPlugin: (id: PluginID) => Promise<boolean> = async id => {
+    if (!this.checkDep(id)) {
+      // throw new Error(`Cannot install plugin ${id} due to missing dependencies`);
+      console.warn(`Cannot install plugin ${id} due to missing dependencies`);
+      return false;
+    }
+
+    try {
+      await pluginManager.loadPlugin(id);
+      this.installedSet.add(id);
+      this.stringify();
+      return true;
+    } catch (error) {
+      console.error(`Failed to install plugin ${id}:`, error);
+      return false;
+    }
+  };
+
+  disablePlugin: (id: PluginID) => Promise<void> = async id => {
+    await pluginManager.disablePlugin(id);
+    this.installedSet.delete(id);
+    this.stringify();
+  };
+
+  static getInstance() {
+    if (!PluginStore.instance) {
+      PluginStore.instance = new PluginStore();
+    }
+    return PluginStore.instance;
+  }
+}

package/src/core/{registry.ts → plugin-system/registry.ts}

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type { SlotName, HookPoint, IComPropsRegisteredToSlot } from '#/types/slots';
 
-import { createEventBus } from './utils/eventBus';
+import { createEventBus } from '../utils/eventBus';
 
 export interface ISlotEntry {
   id: string;
@@ -120,5 +120,3 @@ export class Registry {
     return result;
   }
 }
-
-export const registry = new Registry();