@bbki.ng/site 5.8.1 → 5.8.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @bbki.ng/site
 
+## 5.8.3
+
+### Patch Changes
+
+- b74177a: refactor ui service
+
+## 5.8.2
+
+### Patch Changes
+
+- b4037f7: udpate notification zIndex
+
 ## 5.8.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "5.8.1",
+  "version": "5.8.3",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "type": "module",

package/src/core/components/SlotComp.tsx

@@ -1,27 +1,14 @@
 import React from 'react';
 
-import { useSlotComp } from '../hooks/useSlotComp';
+import { SystemUIService } from '#/core/plugin-system/services/systemUIService';
+import { createSlotComponent } from '#/core/shared-service/factory/createUIServiceReactKit';
+
 import { SystemSlotName } from '../shared-service/contract/IUIService';
 
 export interface ISlotProps {
   name: SystemSlotName;
   data?: unknown;
-
   placeholder?: React.ReactNode;
 }
 
-export const Slot: React.FC<ISlotProps> = ({ name, data, placeholder }) => {
-  const components = useSlotComp(name);
-
-  if (components.length === 0) {
-    return <>{placeholder}</>;
-  }
-
-  return (
-    <>
-      {components.map((Component, index) => (
-        <Component key={index} data={data} />
-      ))}
-    </>
-  );
-};
+export const Slot = createSlotComponent<SystemSlotName>(SystemUIService.getInstance());

package/src/core/hooks/index.ts

@@ -1,6 +1,6 @@
 export { useSlotComp } from './useSlotComp';
 export { useMiddlewareRunner } from './useMiddlewareTransData';
 export type {
-  UseMiddlewareTransDataOptions,
-  UseMiddlewareTransDataResult,
+  UseMiddlewareRunnerOptions as UseMiddlewareTransDataOptions,
+  UseMiddlewareRunnerResult as UseMiddlewareTransDataResult,
 } from './useMiddlewareTransData';

package/src/core/hooks/useMiddlewareTransData.ts

@@ -1,82 +1,13 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
-
-import { SystemUIService } from '../plugin-system/services/systemUIService';
-import { SystemDataHookPoint } from '../shared-service/contract/IUIService';
-
-export interface UseMiddlewareTransDataOptions {
-  hookPoint: SystemDataHookPoint;
-  onMiddlewareChange?: () => void; // 通知外部，由外部决定是否 run
-}
-
-export interface UseMiddlewareTransDataResult<T> {
-  loading: boolean;
-  error: Error | null;
-  run: (inputData: T) => Promise<T>;
-}
-
-export function useMiddlewareRunner<T>({
-  hookPoint,
-  onMiddlewareChange,
-}: UseMiddlewareTransDataOptions): UseMiddlewareTransDataResult<T> {
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-
-  const run = useCallback(
-    async (inputData: T) => {
-      setLoading(true);
-      setError(null);
-      try {
-        const result = await SystemUIService.getInstance().runMiddlewares(hookPoint, inputData);
-        return result;
-      } catch (err) {
-        const error = err instanceof Error ? err : new Error(String(err));
-        setError(error);
-        throw error;
-      } finally {
-        setLoading(false);
-      }
-    },
-    [hookPoint]
-  );
-
-  // 仅通知，不执行
-  useEffect(() => {
-    const unsubscribe = SystemUIService.getInstance().subscribeMiddlewareChange(hook => {
-      if (hook === hookPoint) {
-        onMiddlewareChange?.();
-      }
-    });
-
-    return () => {
-      unsubscribe();
-    };
-  }, [hookPoint, onMiddlewareChange]);
-
-  return { loading, error, run };
-}
-
-export const useMiddlewareTransformedData = <T>(
-  hookPoint: SystemDataHookPoint,
-  defaultValue: T
-) => {
-  const [result, setResult] = useState<T>(defaultValue);
-
-  const runRef = useRef<(input: T) => Promise<T>>(() => Promise.resolve(defaultValue));
-
-  const onMiddlewareChange = useCallback(() => {
-    runRef.current(defaultValue).then(setResult);
-  }, [defaultValue]);
-
-  const { run } = useMiddlewareRunner<T>({
-    hookPoint,
-    onMiddlewareChange,
-  });
-
-  runRef.current = run;
-
-  useEffect(() => {
-    run(defaultValue).then(setResult);
-  }, [defaultValue, run]);
-
-  return result;
-};
+import {
+  createMiddlewareRunnerHook,
+  createMiddlewareTransformedDataHook,
+} from '#/core/shared-service/factory/createUIServiceReactKit';
+import { SystemUIService } from '#/core/plugin-system/services/systemUIService';
+
+export const useMiddlewareRunner = createMiddlewareRunnerHook(SystemUIService.getInstance());
+export const useMiddlewareTransformedData =
+  createMiddlewareTransformedDataHook(useMiddlewareRunner);
+export type {
+  UseMiddlewareRunnerOptions,
+  UseMiddlewareRunnerResult,
+} from '#/core/shared-service/factory/createUIServiceReactKit';

package/src/core/hooks/useSlotComp.ts

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

package/src/core/hooks/use_plugins.ts

@@ -16,14 +16,15 @@ const usePluginsLoading = () => {
   }, [isLoading]);
 
   useEffect(() => {
-    let unregister: (() => void) | undefined;
+    let unregisters = new Map<string, () => void>();
+
     const unsubscribe = CoreService.getInstance().subscribePluginLoading(payload => {
-      unregister = setGlobalLoading(payload.id, payload.loading);
+      unregisters.set(payload.id, setGlobalLoading(payload.id, payload.loading));
     });
 
     return () => {
       unsubscribe();
-      unregister?.();
+      unregisters.forEach(unregister => unregister());
     };
   }, [setGlobalLoading]);
 };

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

@@ -78,8 +78,7 @@ class PluginManager {
 
       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;
+        throw new Error(`Plugin ${pluginId} requires admin permission, but it's not trusted.`);
       }
 
       const ctx = this.createHostContext(perm);
@@ -108,6 +107,10 @@ class PluginManager {
       await plugin.onDisable();
     }
 
+    if (plugin.onDestroy) {
+      plugin.onDestroy();
+    }
+
     this.activePlugins.delete(pluginId);
 
     SystemUIService.getInstance().unregisterAllByPluginId(plugin.id);

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

@@ -2,7 +2,7 @@ import { cfApiFetcher } from '#/app/utils';
 import { FALLBACK_MANIFEST } from '#/core/plugin-system/manifest';
 import { IPluginManifestEntry, PluginID } from '#/types/plugin';
 
-const KnownPluginIDSet = new Set<string>(FALLBACK_MANIFEST.map(entry => entry.id));
+// const KnownPluginIDSet = new Set<string>(FALLBACK_MANIFEST.map(entry => entry.id));
 
 interface PluginsApiResponse {
   status: string;
@@ -48,22 +48,6 @@ class PluginManifestService {
         if (res.status === 'success' && Array.isArray(res.data)) {
           const validated = res.data
             .map((item): IPluginManifestEntry | null => {
-              if (!KnownPluginIDSet.has(item.id)) {
-                console.warn(`[PluginManifestService] Unknown plugin id from server: ${item.id}`);
-                return null;
-              }
-
-              let dependencies: PluginID[] | undefined;
-              if (item.dependencies) {
-                try {
-                  dependencies = item.dependencies.filter(p => KnownPluginIDSet.has(p));
-                } catch {
-                  console.warn(
-                    `[PluginManifestService] Failed to parse dependencies for plugin: ${item.id}`
-                  );
-                }
-              }
-
               return {
                 id: item.id as PluginID,
                 name: item.name,
@@ -71,7 +55,7 @@ class PluginManifestService {
                 description: item.description,
                 perm: (item.perm as 'guest' | 'admin' | undefined) || 'guest',
                 icon: item.icon,
-                dependencies,
+                dependencies: item.dependencies || [],
               };
             })
             .filter((item): item is IPluginManifestEntry => item !== null);

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

@@ -12,6 +12,7 @@ export class PluginStore {
     this.parse();
   }
 
+  // TODO: check circular dependency when install plugin, and also check if all dependencies are installed before install a plugin
   private checkDep = (id: PluginID): boolean => {
     const manifest = PluginManifestService.getInstance().getPlugin(id);
     if (!manifest) {

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

@@ -1,8 +1,6 @@
 import React from 'react';
 
-import type { SlotName, HookPoint, IComPropsRegisteredToSlot } from '#/types/slots';
-
-import { createEventBus } from '../utils/eventBus';
+import type { IComPropsRegisteredToSlot } from '#/types/slots';
 
 export interface ISlotEntry {
   id: string;
@@ -17,106 +15,3 @@ export interface IMiddlewareEntry<T> {
   pluginId: string;
   weight?: number;
 }
-
-type RegistryEvents = {
-  'components:changed': void;
-  'middleware:changed': HookPoint;
-};
-
-export class Registry {
-  private slots = new Map<SlotName, ISlotEntry[]>();
-
-  private bus = createEventBus<RegistryEvents>();
-
-  private middlewares = new Map<HookPoint, IMiddlewareEntry<unknown>[]>();
-
-  subscribeMiddleware(hookPoint: HookPoint, listener: () => void) {
-    return this.bus.on('middleware:changed', point => {
-      if (point === hookPoint) {
-        listener();
-      }
-    });
-  }
-
-  subscribe(listener: () => void) {
-    return this.bus.on('components:changed', listener);
-  }
-
-  registerComponent(
-    slot: SlotName,
-    component: React.ComponentType<IComPropsRegisteredToSlot>,
-    pluginId: string,
-    weight = 0
-  ) {
-    const existing = this.slots.get(slot) || [];
-
-    const newEntry: ISlotEntry = {
-      id: `${pluginId}-${component.name || 'comp'}`,
-      pluginId,
-      component,
-      weight,
-    };
-
-    // 插入并按权重排序（权重大的在前）
-    const newList = [...existing, newEntry].sort((a, b) => b.weight - a.weight);
-    this.slots.set(slot, newList);
-
-    this.bus.emit('components:changed', undefined);
-  }
-
-  unregisterAllByPluginId(pluginId: string) {
-    // 1. 清理 UI 槽位
-    this.slots.forEach((entries, slotName) => {
-      const filtered = entries.filter(entry => entry.pluginId !== pluginId);
-      this.slots.set(slotName, filtered);
-    });
-
-    // 2. 清理中间件
-    this.middlewares.forEach((entries, point) => {
-      const filtered = entries.filter(entry => entry.pluginId !== pluginId);
-      this.middlewares.set(point, filtered);
-    });
-
-    console.log(`[Registry] All resources for plugin "${pluginId}" have been cleared.`);
-
-    this.bus.emit('components:changed', undefined);
-  }
-
-  registerMiddleware<T>(
-    hookPoint: HookPoint,
-    fn: (data: T) => Promise<T> | T,
-    pluginId: string,
-    weight = 0
-  ) {
-    const existing = this.middlewares.get(hookPoint) || [];
-
-    const newEntry: IMiddlewareEntry<T> = {
-      id: `${pluginId}-${fn.name || 'middleware'}`,
-      pluginId,
-      fn,
-      weight,
-    };
-
-    // 插入并按权重排序（权重大的在前）
-    const newList = [...existing, newEntry as IMiddlewareEntry<unknown>].sort(
-      (a, b) => (b.weight || 0) - (a.weight || 0)
-    );
-
-    this.middlewares.set(hookPoint, newList);
-
-    this.bus.emit('middleware:changed', hookPoint);
-  }
-
-  getComponents(slotName: SlotName): React.ComponentType<IComPropsRegisteredToSlot>[] {
-    return (this.slots.get(slotName) || []).map(entry => entry.component);
-  }
-
-  async runMiddleware<T>(point: HookPoint, data: T): Promise<T> {
-    const fns = (this.middlewares.get(point) || []).map(entry => entry.fn);
-    let result = data;
-    for (const fn of fns) {
-      result = (await fn(result)) as T;
-    }
-    return result;
-  }
-}

package/src/core/plugin-system/services/systemUIService.ts

@@ -1,66 +1,22 @@
-import React from 'react';
 import { PathRouteProps } from 'react-router-dom';
 import { LinkProps } from '@bbki.ng/ui';
 
+import { buildEntrySlotCom } from '#/utils';
+import { createUIService } from '#/core/shared-service/factory/createUIService';
 import {
   ISystemUIService,
   SystemDataHookPoint,
   SystemSlotName,
 } from '#/core/shared-service/contract/IUIService';
 import { IPluginEntry, PluginID } from '#/types/plugin';
-import { IComPropsRegisteredToSlot } from '#/types/slots';
-import { createEventBus } from '#/core/utils/eventBus';
-import { buildEntrySlotCom } from '#/utils';
 
-import { IMiddlewareEntry, ISlotEntry } from '../registry';
-
-type RegistryEvents = {
-  'system:slots:changed': void;
-  'system:middleware:changed': SystemDataHookPoint;
-};
+const baseService = createUIService<SystemSlotName, SystemDataHookPoint>('system');
 
 export class SystemUIService implements ISystemUIService {
   private static instance: SystemUIService;
 
-  private slots = new Map<SystemSlotName, Array<ISlotEntry>>();
-  private middlewares = new Map<SystemDataHookPoint, IMiddlewareEntry<unknown>[]>();
-
-  private bus = createEventBus<RegistryEvents>();
-
   private constructor() {}
 
-  subscribeSlotChange(listener: () => void) {
-    return this.bus.on('system:slots:changed', listener);
-  }
-
-  registerMiddleware: <T>(
-    hookPoint: SystemDataHookPoint,
-    fn: (data: T) => T | Promise<T>,
-    pluginId: PluginID,
-    weight?: number
-  ) => void = <T>(
-    hookPoint: SystemDataHookPoint,
-    fn: (data: T) => T | Promise<T>,
-    pluginId: PluginID,
-    weight = 0
-  ) => {
-    const existing = this.middlewares.get(hookPoint) || [];
-
-    const newEntry: IMiddlewareEntry<T> = {
-      id: `${pluginId}-${hookPoint}-middleware`,
-      pluginId,
-      fn,
-      weight,
-    };
-
-    const updated = [...existing, newEntry as IMiddlewareEntry<unknown>].sort(
-      (a, b) => (b.weight || 0) - (a.weight || 0)
-    );
-    this.middlewares.set(hookPoint, updated);
-
-    this.bus.emit('system:middleware:changed', hookPoint);
-  };
-
   static getInstance(): SystemUIService {
     if (!SystemUIService.instance) {
       SystemUIService.instance = new SystemUIService();
@@ -68,6 +24,15 @@ export class SystemUIService implements ISystemUIService {
     return SystemUIService.instance;
   }
 
+  registerSlot = baseService.registerSlot.bind(baseService);
+  registerMiddleware = baseService.registerMiddleware.bind(baseService);
+  unregisterAllByPluginId = baseService.unregisterAllByPluginId.bind(baseService);
+  getSlotEntries = baseService.getSlotEntries.bind(baseService);
+  getComponents = baseService.getComponents.bind(baseService);
+  subscribeSlotChange = baseService.subscribeSlotChange.bind(baseService);
+  subscribeMiddlewareChange = baseService.subscribeMiddlewareChange.bind(baseService);
+  runMiddlewares = baseService.runMiddlewares.bind(baseService);
+
   registerPluginEntry: (entry: IPluginEntry, id: PluginID) => void = (entry, id) => {
     this.registerMiddleware(
       'extendedRoutes',
@@ -102,58 +67,4 @@ export class SystemUIService implements ISystemUIService {
       10
     );
   };
-
-  registerSlot: (
-    slotName: SystemSlotName,
-    component: React.ComponentType<IComPropsRegisteredToSlot>,
-    pluginId: PluginID,
-    weight?: number
-  ) => void = (slotName, component, pluginId, weight = 0) => {
-    const existing = this.slots.get(slotName) || [];
-
-    const newEntry: ISlotEntry = {
-      id: `${pluginId}-${component.name || 'comp'}`,
-      pluginId,
-      component,
-      weight,
-    };
-
-    // 插入并按权重排序（权重大的在前）
-    const updated = [...existing, newEntry].sort((a, b) => b.weight - a.weight);
-    this.slots.set(slotName, updated);
-
-    this.bus.emit('system:slots:changed', undefined);
-  };
-
-  unregisterAllByPluginId(pluginId: string) {
-    this.slots.forEach((entries, slotName) => {
-      const filtered = entries.filter(entry => entry.pluginId !== pluginId);
-      this.slots.set(slotName, filtered);
-    });
-
-    this.middlewares.forEach((entries, point) => {
-      const filtered = entries.filter(entry => entry.pluginId !== pluginId);
-      this.middlewares.set(point, filtered);
-      this.bus.emit('system:middleware:changed', point);
-    });
-
-    this.bus.emit('system:slots:changed', undefined);
-  }
-
-  getComponents(slotName: SystemSlotName): React.ComponentType<IComPropsRegisteredToSlot>[] {
-    return (this.slots.get(slotName) || []).map(entry => entry.component);
-  }
-
-  subscribeMiddlewareChange(listener: (point: SystemDataHookPoint) => void) {
-    return this.bus.on('system:middleware:changed', listener);
-  }
-
-  async runMiddlewares<T>(point: SystemDataHookPoint, data: T): Promise<T> {
-    const fns = (this.middlewares.get(point) || []).map(entry => entry.fn);
-    let result = data;
-    for (const fn of fns) {
-      result = (await fn(result)) as T;
-    }
-    return result;
-  }
 }

package/src/core/shared-service/contract/IUIService.ts

@@ -1,5 +1,6 @@
 import type React from 'react';
 
+import type { ISlotEntry } from '#/core/plugin-system/registry';
 import { IPluginEntry, PluginID } from '#/types/plugin';
 import { IComPropsRegisteredToSlot } from '#/types/slots';
 
@@ -23,6 +24,18 @@ export interface IBaseUIService<T extends string, K extends string> {
     pluginId: PluginID,
     weight?: number
   ) => void;
+
+  unregisterAllByPluginId(pluginId: string): void;
+
+  getSlotEntries(slotName: T): ISlotEntry[];
+
+  getComponents(slotName: T): React.ComponentType<IComPropsRegisteredToSlot>[];
+
+  subscribeSlotChange(listener: () => void): () => void;
+
+  subscribeMiddlewareChange(listener: (point: K) => void): () => void;
+
+  runMiddlewares: <S>(point: K, data: S) => Promise<S>;
 }
 
 export type SystemSlotName = 'leftCol' | 'rightCol' | 'logo' | 'route' | 'pageFooter';
@@ -33,17 +46,5 @@ export type SystemDataHookPoint =
   | 'transformCoverEntry';
 
 export interface ISystemUIService extends IBaseUIService<SystemSlotName, SystemDataHookPoint> {
-  registerMiddleware: <S>(
-    hookPoint: SystemDataHookPoint,
-    fn: (data: S) => S | Promise<S>,
-    pluginId: PluginID,
-    weight?: number
-  ) => void;
-  registerSlot: (
-    slotName: SystemSlotName,
-    component: React.ComponentType<IComPropsRegisteredToSlot>,
-    pluginId: PluginID,
-    weight?: number
-  ) => void;
   registerPluginEntry: (entry: IPluginEntry, id: PluginID) => void;
 }

package/src/core/shared-service/factory/createUIService.ts

@@ -0,0 +1,121 @@
+import type React from 'react';
+
+import type { IMiddlewareEntry, ISlotEntry } from '#/core/plugin-system/registry';
+import { createEventBus } from '#/core/utils/eventBus';
+import type { PluginID } from '#/types/plugin';
+import type { IComPropsRegisteredToSlot } from '#/types/slots';
+
+export interface IUIService<TSlot extends string, THook extends string> {
+  registerSlot(
+    slotName: TSlot,
+    component: React.ComponentType<IComPropsRegisteredToSlot>,
+    pluginId: PluginID,
+    weight?: number
+  ): void;
+
+  registerMiddleware<T>(
+    hookPoint: THook,
+    fn: (data: T) => T | Promise<T>,
+    pluginId: PluginID,
+    weight?: number
+  ): void;
+
+  unregisterAllByPluginId(pluginId: string): void;
+
+  getSlotEntries(slotName: TSlot): ISlotEntry[];
+
+  getComponents(slotName: TSlot): React.ComponentType<IComPropsRegisteredToSlot>[];
+
+  subscribeSlotChange(listener: () => void): () => void;
+
+  subscribeMiddlewareChange(listener: (point: THook) => void): () => void;
+
+  runMiddlewares<T>(point: THook, data: T): Promise<T>;
+}
+
+export function createUIService<TSlot extends string, THook extends string>(
+  _: string
+): IUIService<TSlot, THook> {
+  const slots = new Map<TSlot, Array<ISlotEntry>>();
+  const middlewares = new Map<THook, Array<IMiddlewareEntry<unknown>>>();
+  const bus = createEventBus<{
+    slotsChanged: void;
+    middlewareChanged: THook;
+  }>();
+
+  return {
+    registerSlot(slotName, component, pluginId, weight = 0) {
+      const existing = slots.get(slotName) || [];
+      const newEntry: ISlotEntry = {
+        id: `${pluginId}-${slotName}-${component.name || 'comp'}`,
+        pluginId,
+        component,
+        weight,
+      };
+      const updated = [...existing, newEntry].sort((a, b) => (b.weight || 0) - (a.weight || 0));
+      slots.set(slotName, updated);
+      bus.emit('slotsChanged', undefined);
+    },
+
+    registerMiddleware(hookPoint, fn, pluginId, weight = 0) {
+      const existing = middlewares.get(hookPoint) || [];
+      const newEntry: IMiddlewareEntry<unknown> = {
+        id: `${pluginId}-${hookPoint}-middleware`,
+        pluginId,
+        fn: fn as (data: unknown) => unknown | Promise<unknown>,
+        weight,
+      };
+      const updated = [...existing, newEntry].sort((a, b) => (b.weight || 0) - (a.weight || 0));
+      middlewares.set(hookPoint, updated);
+      bus.emit('middlewareChanged', hookPoint);
+    },
+
+    unregisterAllByPluginId(pluginId) {
+      let slotsChanged = false;
+      slots.forEach((entries, slotName) => {
+        const filtered = entries.filter(entry => entry.pluginId !== pluginId);
+        if (filtered.length !== entries.length) {
+          slots.set(slotName, filtered);
+          slotsChanged = true;
+        }
+      });
+
+      middlewares.forEach((entries, point) => {
+        const filtered = entries.filter(entry => entry.pluginId !== pluginId);
+        if (filtered.length !== entries.length) {
+          middlewares.set(point, filtered);
+          bus.emit('middlewareChanged', point);
+        }
+      });
+
+      if (slotsChanged) {
+        bus.emit('slotsChanged', undefined);
+      }
+    },
+
+    getSlotEntries(slotName) {
+      return slots.get(slotName) || [];
+    },
+
+    getComponents(slotName) {
+      return (slots.get(slotName) || []).map(entry => entry.component);
+    },
+
+    subscribeSlotChange(listener) {
+      return bus.on('slotsChanged', listener as (data: unknown) => void);
+    },
+
+    subscribeMiddlewareChange(listener) {
+      return bus.on('middlewareChanged', listener as (data: unknown) => void);
+    },
+
+    async runMiddlewares(point, data) {
+      const fns = (middlewares.get(point) || []).map(entry => entry.fn);
+      let result: unknown = data;
+      for (const fn of fns) {
+        result = await fn(result);
+      }
+      return result as typeof data;
+    },
+  };
+}

package/src/core/shared-service/factory/createUIServiceReactKit.tsx

@@ -0,0 +1,149 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import type { IComPropsRegisteredToSlot } from '#/types/slots';
+
+import type { IUIService } from './createUIService';
+
+export interface UseMiddlewareRunnerOptions<THook extends string> {
+  hookPoint: THook;
+  onMiddlewareChange?: () => void;
+}
+
+export interface UseMiddlewareRunnerResult<T> {
+  loading: boolean;
+  error: Error | null;
+  run: (inputData: T) => Promise<T>;
+}
+
+export function createSlotHook<TSlot extends string>(service: IUIService<TSlot, string>) {
+  return function useSlotComp(slotName: TSlot) {
+    const [components, setComponents] = useState<React.ComponentType<IComPropsRegisteredToSlot>[]>(
+      () => service.getComponents(slotName)
+    );
+
+    useEffect(() => {
+      setComponents(service.getComponents(slotName));
+
+      const unsubscribe = service.subscribeSlotChange(() => {
+        setComponents(service.getComponents(slotName));
+      });
+
+      return () => {
+        unsubscribe();
+      };
+    }, [slotName]);
+
+    return components;
+  };
+}
+
+export function createSlotComponent<TSlot extends string>(service: IUIService<TSlot, string>) {
+  return function Slot({
+    name,
+    data,
+    placeholder,
+  }: {
+    name: TSlot;
+    data?: unknown;
+    placeholder?: React.ReactNode;
+  }) {
+    const [entries, setEntries] = useState(() => service.getSlotEntries(name));
+
+    useEffect(() => {
+      setEntries(service.getSlotEntries(name));
+
+      const unsubscribe = service.subscribeSlotChange(() => {
+        setEntries(service.getSlotEntries(name));
+      });
+
+      return () => {
+        unsubscribe();
+      };
+    }, [name]);
+
+    if (entries.length === 0) {
+      return <>{placeholder}</>;
+    }
+
+    return (
+      <>
+        {entries.map(({ id, component: Component }) => (
+          <Component key={id} data={data} />
+        ))}
+      </>
+    );
+  };
+}
+
+export function createMiddlewareRunnerHook<THook extends string>(
+  service: IUIService<string, THook>
+) {
+  return function useMiddlewareRunner<T>({
+    hookPoint,
+    onMiddlewareChange,
+  }: UseMiddlewareRunnerOptions<THook>): UseMiddlewareRunnerResult<T> {
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<Error | null>(null);
+
+    const run = useCallback(
+      async (inputData: T) => {
+        setLoading(true);
+        setError(null);
+        try {
+          const result = await service.runMiddlewares(hookPoint, inputData);
+          return result;
+        } catch (err) {
+          const error = err instanceof Error ? err : new Error(String(err));
+          setError(error);
+          throw error;
+        } finally {
+          setLoading(false);
+        }
+      },
+      [hookPoint]
+    );
+
+    useEffect(() => {
+      const unsubscribe = service.subscribeMiddlewareChange(hook => {
+        if (hook === hookPoint) {
+          onMiddlewareChange?.();
+        }
+      });
+
+      return () => {
+        unsubscribe();
+      };
+    }, [hookPoint, onMiddlewareChange]);
+
+    return { loading, error, run };
+  };
+}
+
+export function createMiddlewareTransformedDataHook<THook extends string>(
+  useMiddlewareRunner: <T>(opts: UseMiddlewareRunnerOptions<THook>) => UseMiddlewareRunnerResult<T>
+) {
+  return function useMiddlewareTransformedData<T>(hookPoint: THook, defaultValue: T) {
+    const [result, setResult] = useState<T>(defaultValue);
+
+    const runRef = useRef<(input: T) => Promise<T>>(() => Promise.resolve(defaultValue));
+
+    const onMiddlewareChange = useCallback(() => {
+      runRef.current(defaultValue).then(setResult);
+    }, [defaultValue]);
+
+    const { run } = useMiddlewareRunner<T>({
+      hookPoint,
+      onMiddlewareChange,
+    });
+
+    useEffect(() => {
+      runRef.current = run;
+    }, [run]);
+
+    useEffect(() => {
+      run(defaultValue).then(setResult);
+    }, [defaultValue, run]);
+
+    return result;
+  };
+}

package/src/plugins/blog/components/BlogSlotCom.tsx

@@ -1,27 +1,14 @@
 import React from 'react';
 
-import { useBlogSlotComp } from '../hooks/use_blog_slot_com';
+import { createSlotComponent } from '#/core/shared-service/factory/createUIServiceReactKit';
+
+import { BlogUIService } from '../services/BlogUIService';
 import { BlogSlotName } from '../services/IBlogUIService';
 
 export interface ISlotProps {
   name: BlogSlotName;
   data?: unknown;
-
   placeholder?: React.ReactNode;
 }
 
-export const Slot: React.FC<ISlotProps> = ({ name, data, placeholder }) => {
-  const components = useBlogSlotComp(name);
-
-  if (components.length === 0) {
-    return <>{placeholder}</>;
-  }
-
-  return (
-    <>
-      {components.map((Component, index) => (
-        <Component key={index} data={data} />
-      ))}
-    </>
-  );
-};
+export const Slot = createSlotComponent<BlogSlotName>(BlogUIService.getInstance());

package/src/plugins/blog/hooks/useMiddlewareTransData.ts

@@ -1,79 +1,14 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
+import {
+  createMiddlewareRunnerHook,
+  createMiddlewareTransformedDataHook,
+} from '#/core/shared-service/factory/createUIServiceReactKit';
 
 import { BlogUIService } from '../services/BlogUIService';
-import { BlogDataHookPoint } from '../services/IBlogUIService';
 
-export interface UseMiddlewareTransDataOptions {
-  hookPoint: BlogDataHookPoint;
-  onMiddlewareChange?: () => void; // 通知外部，由外部决定是否 run
-}
-
-export interface UseMiddlewareTransDataResult<T> {
-  loading: boolean;
-  error: Error | null;
-  run: (inputData: T) => Promise<T>;
-}
-
-export function useMiddlewareRunner<T>({
-  hookPoint,
-  onMiddlewareChange,
-}: UseMiddlewareTransDataOptions): UseMiddlewareTransDataResult<T> {
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-
-  const run = useCallback(
-    async (inputData: T) => {
-      setLoading(true);
-      setError(null);
-      try {
-        const result = await BlogUIService.getInstance().runMiddlewares(hookPoint, inputData);
-        return result;
-      } catch (err) {
-        const error = err instanceof Error ? err : new Error(String(err));
-        setError(error);
-        throw error;
-      } finally {
-        setLoading(false);
-      }
-    },
-    [hookPoint]
-  );
-
-  // 仅通知，不执行
-  useEffect(() => {
-    const unsubscribe = BlogUIService.getInstance().subscribeMiddlewareChange(hook => {
-      if (hook === hookPoint) {
-        onMiddlewareChange?.();
-      }
-    });
-
-    return () => {
-      unsubscribe();
-    };
-  }, [hookPoint, onMiddlewareChange]);
-
-  return { loading, error, run };
-}
-
-export const useMiddlewareTransformedData = <T>(hookPoint: BlogDataHookPoint, defaultValue: T) => {
-  const [result, setResult] = useState<T>(defaultValue);
-
-  const runRef = useRef<(input: T) => Promise<T>>(() => Promise.resolve(defaultValue));
-
-  const onMiddlewareChange = useCallback(() => {
-    runRef.current(defaultValue).then(setResult);
-  }, [defaultValue]);
-
-  const { run } = useMiddlewareRunner<T>({
-    hookPoint,
-    onMiddlewareChange,
-  });
-
-  runRef.current = run;
-
-  useEffect(() => {
-    run(defaultValue).then(setResult);
-  }, [defaultValue, run]);
-
-  return result;
-};
+export const useMiddlewareRunner = createMiddlewareRunnerHook(BlogUIService.getInstance());
+export const useMiddlewareTransformedData =
+  createMiddlewareTransformedDataHook(useMiddlewareRunner);
+export type {
+  UseMiddlewareRunnerOptions,
+  UseMiddlewareRunnerResult as UseMiddlewareTransformedDataResult,
+} from '#/core/shared-service/factory/createUIServiceReactKit';

package/src/plugins/blog/hooks/use_blog_slot_com.ts

@@ -1,27 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { createSlotHook } from '#/core/shared-service/factory/createUIServiceReactKit';
 
-import { IComPropsRegisteredToSlot } from '#/types/slots';
-
-import { BlogSlotName } from '../services/IBlogUIService';
 import { BlogUIService } from '../services/BlogUIService';
 
-export const useBlogSlotComp = (slotName: BlogSlotName) => {
-  const [components, setComponents] = useState<React.ComponentType<IComPropsRegisteredToSlot>[]>(
-    () => BlogUIService.getInstance().getComponents(slotName)
-  );
-
-  useEffect(() => {
-    // setComponents(BlogUIService.getInstance().getComponents(slotName));
-
-    const unsubscribe = BlogUIService.getInstance().subscribeSlotChange(() => {
-      const comps = BlogUIService.getInstance().getComponents(slotName);
-      setComponents(comps);
-    });
-
-    return () => {
-      unsubscribe();
-    };
-  }, [slotName]);
-
-  return components;
-};
+export const useBlogSlotComp = createSlotHook(BlogUIService.getInstance());

package/src/plugins/blog/index.ts

@@ -15,6 +15,8 @@ export class BlogPlugin extends BBPlugin {
 
   private _serviceRegistry?: ServiceRegistry;
 
+  private _unsubscribePluginUninstall?: () => void;
+
   override onInstall = async (ctx: IHostContext) => {
     ctx.service.register('blog:uiService', BlogUIService.getInstance());
 
@@ -28,7 +30,9 @@ export class BlogPlugin extends BBPlugin {
       return;
     }
 
-    coreService.subscribePluginUninstall(this.handlePluginUninstall);
+    this._unsubscribePluginUninstall = coreService.subscribePluginUninstall(
+      this.handlePluginUninstall
+    );
 
     systemUIService?.registerPluginEntry(
       {
@@ -50,6 +54,7 @@ export class BlogPlugin extends BBPlugin {
   override onDestroy?: (() => void) | undefined = () => {
     BlogUIService.getInstance().unregisterAllByPluginId(this.id);
     this._serviceRegistry?.unregister('blog:uiService');
+    this._unsubscribePluginUninstall?.();
   };
 
   private handlePluginUninstall = (payload: PluginID) => {

package/src/plugins/blog/services/BlogUIService.ts

@@ -1,26 +1,14 @@
-import type React from 'react';
-
-import { IMiddlewareEntry, ISlotEntry } from '#/core/plugin-system/registry';
-import { createEventBus } from '#/core/utils/eventBus';
-import { IComPropsRegisteredToSlot } from '#/types/slots';
+import { createUIService } from '#/core/shared-service/factory/createUIService';
 
 import { BlogDataHookPoint, BlogSlotName, IBlogUIService } from './IBlogUIService';
 
-type RegistryEvents = {
-  'blog:slots:changed': void;
-  'blog:middleware:changed': BlogDataHookPoint;
-};
+const baseService = createUIService<BlogSlotName, BlogDataHookPoint>('blog');
 
 export class BlogUIService implements IBlogUIService {
   private static instance: BlogUIService;
 
   private constructor() {}
 
-  private slots = new Map<BlogSlotName, Array<ISlotEntry>>();
-  private middlewares = new Map<BlogDataHookPoint, IMiddlewareEntry<unknown>[]>();
-
-  private bus = createEventBus<RegistryEvents>();
-
   static getInstance(): BlogUIService {
     if (!BlogUIService.instance) {
       BlogUIService.instance = new BlogUIService();
@@ -28,93 +16,12 @@ export class BlogUIService implements IBlogUIService {
     return BlogUIService.instance;
   }
 
-  subscribeSlotChange(listener: () => void) {
-    return this.bus.on('blog:slots:changed', listener);
-  }
-
-  subscribeMiddlewareChange(listener: (hookPoint: BlogDataHookPoint) => void) {
-    return this.bus.on('blog:middleware:changed', listener);
-  }
-
-  registerMiddleware: <S>(
-    hookPoint: BlogDataHookPoint,
-    fn: (data: S) => S | Promise<S>,
-    pluginId: string,
-    weight?: number
-  ) => void = <S>(
-    hookPoint: BlogDataHookPoint,
-    fn: (data: S) => S | Promise<S>,
-    pluginId: string,
-    weight = 0
-  ) => {
-    const existing = this.middlewares.get(hookPoint) || [];
-
-    const newEntry: IMiddlewareEntry<S> = {
-      id: `${pluginId}-${hookPoint}-middleware`,
-      pluginId,
-      fn,
-      weight,
-    };
-
-    const updated = [...existing, newEntry as IMiddlewareEntry<unknown>].sort(
-      (a, b) => (b.weight || 0) - (a.weight || 0)
-    );
-    this.middlewares.set(hookPoint, updated);
-
-    this.bus.emit('blog:middleware:changed', hookPoint);
-  };
-
-  registerSlot: (
-    slotName: BlogSlotName,
-    component: React.ComponentType<{ data: unknown }>,
-    pluginId: string,
-    weight?: number
-  ) => void = (slotName, component, pluginId, weight = 0) => {
-    const existing = this.slots.get(slotName) || [];
-    const newEntry: ISlotEntry = {
-      id: `${pluginId}-${slotName}-slot`,
-      pluginId,
-      component,
-      weight,
-    };
-
-    const updated = [...existing, newEntry].sort((a, b) => (b.weight || 0) - (a.weight || 0));
-    this.slots.set(slotName, updated);
-
-    this.bus.emit('blog:slots:changed', undefined);
-  };
-
-  unregisterAllByPluginId: (pluginId: string) => void = pluginId => {
-    // 移除中间件
-    this.middlewares.forEach((entries, hookPoint) => {
-      const filtered = entries.filter(entry => entry.pluginId !== pluginId);
-      if (filtered.length !== entries.length) {
-        this.middlewares.set(hookPoint, filtered);
-        this.bus.emit('blog:middleware:changed', hookPoint);
-      }
-    });
-
-    // 移除插槽组件
-    this.slots.forEach((entries, slotName) => {
-      const filtered = entries.filter(entry => entry.pluginId !== pluginId);
-      if (filtered.length !== entries.length) {
-        this.slots.set(slotName, filtered);
-      }
-    });
-
-    this.bus.emit('blog:slots:changed', undefined);
-  };
-
-  getComponents(slotName: BlogSlotName): React.ComponentType<IComPropsRegisteredToSlot>[] {
-    return (this.slots.get(slotName) || []).map(entry => entry.component);
-  }
-
-  async runMiddlewares<T>(point: BlogDataHookPoint, data: T): Promise<T> {
-    const fns = (this.middlewares.get(point) || []).map(entry => entry.fn);
-    let result = data;
-    for (const fn of fns) {
-      result = (await fn(result)) as T;
-    }
-    return result;
-  }
+  registerSlot = baseService.registerSlot.bind(baseService);
+  registerMiddleware = baseService.registerMiddleware.bind(baseService);
+  unregisterAllByPluginId = baseService.unregisterAllByPluginId.bind(baseService);
+  getSlotEntries = baseService.getSlotEntries.bind(baseService);
+  getComponents = baseService.getComponents.bind(baseService);
+  subscribeSlotChange = baseService.subscribeSlotChange.bind(baseService);
+  subscribeMiddlewareChange = baseService.subscribeMiddlewareChange.bind(baseService);
+  runMiddlewares = baseService.runMiddlewares.bind(baseService);
 }

package/src/plugins/blog/services/IBlogUIService.ts

@@ -1,5 +1,3 @@
-import type React from 'react';
-
 import { type IBaseUIService } from '#/core/shared-service/contract/IUIService';
 
 declare module '#/core/shared-service/service-registry' {
@@ -15,17 +13,4 @@ export type BlogDataHookPoint =
   | 'blog:transformPostContent'
   | 'blog:transformTitleList';
 
-export interface IBlogUIService extends IBaseUIService<BlogSlotName, BlogDataHookPoint> {
-  registerMiddleware: <S>(
-    hookPoint: BlogDataHookPoint,
-    fn: (data: S) => S | Promise<S>,
-    pluginId: string,
-    weight?: number
-  ) => void;
-  registerSlot: (
-    slotName: BlogSlotName,
-    component: React.ComponentType<{ data: unknown }>,
-    pluginId: string,
-    weight?: number
-  ) => void;
-}
+export interface IBlogUIService extends IBaseUIService<BlogSlotName, BlogDataHookPoint> {}

package/src/plugins/notification/components/index.tsx

@@ -7,6 +7,10 @@ export const NotifyComp: FC<IComPropsRegisteredToSlot> = _ => {
   return (
     <Toaster
       position="bottom-center"
+      style={{
+        position: 'fixed',
+        zIndex: 998,
+      }}
       toastOptions={{
         style: {
           borderRadius: 0,

package/tsconfig.json

@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "jsx": "react",
+    "jsx": "react-jsx",
     "noEmit": true,
     "moduleResolution": "bundler",
     "paths": {