@bbki.ng/site 5.7.0 → 5.8.0

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

@@ -0,0 +1,159 @@
+import React from 'react';
+import { PathRouteProps } from 'react-router-dom';
+import { LinkProps } from '@bbki.ng/ui';
+
+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;
+};
+
+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();
+    }
+    return SystemUIService.instance;
+  }
+
+  registerPluginEntry: (entry: IPluginEntry, id: PluginID) => void = (entry, id) => {
+    this.registerMiddleware(
+      'extendedRoutes',
+      (routes: Array<Omit<PathRouteProps, 'element'>>) => {
+        return [
+          ...routes,
+          {
+            path: entry.path,
+          },
+        ];
+      },
+      id,
+      10
+    );
+
+    this.registerSlot('route', buildEntrySlotCom(entry), id);
+
+    if (!entry.label) return;
+
+    this.registerMiddleware(
+      'transformCoverEntry',
+      (entries: Array<LinkProps>) => {
+        return [
+          ...entries,
+          {
+            to: entry.path,
+            children: entry.label,
+          },
+        ];
+      },
+      id,
+      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/ICoreService.ts

@@ -0,0 +1,23 @@
+import { Fetcher } from 'swr';
+
+import { FingerprintData } from '#/app/utils/fingerprints';
+import { PluginID } from '#/types/plugin';
+
+declare module '#/core/shared-service/service-registry' {
+  interface ServiceIdentifierMap {
+    'core:baseService': ICoreService;
+  }
+}
+
+export interface ICoreService {
+  getVersionHash(): Promise<string> | string;
+  getDeviceId(): Promise<{ id: string; fp: FingerprintData }>;
+
+  setLoading(id: string, loading: boolean): void;
+  subscribeLoadingChange(listener: (payload: boolean) => void): () => void;
+
+  subscribePluginUninstall(listener: (payload: PluginID) => void): () => void;
+  notifyPluginUninstall(id: PluginID): void;
+
+  fetch: Fetcher;
+}

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

@@ -0,0 +1,49 @@
+import type React from 'react';
+
+import { IPluginEntry, PluginID } from '#/types/plugin';
+import { IComPropsRegisteredToSlot } from '#/types/slots';
+
+declare module '#/core/shared-service/service-registry' {
+  interface ServiceIdentifierMap {
+    'core:uiService': ISystemUIService;
+  }
+}
+
+export interface IBaseUIService<T extends string, K extends string> {
+  registerMiddleware: <S>(
+    hookPoint: K,
+    fn: (data: S) => Promise<S> | S,
+    pluginId: PluginID,
+    weight?: number
+  ) => void;
+
+  registerSlot: (
+    slotName: T,
+    component: React.ComponentType<IComPropsRegisteredToSlot>,
+    pluginId: PluginID,
+    weight?: number
+  ) => void;
+}
+
+export type SystemSlotName = 'leftCol' | 'rightCol' | 'logo' | 'route' | 'pageFooter';
+
+export type SystemDataHookPoint =
+  | 'extendedRoutes'
+  | 'transformBreadcrumbPath'
+  | '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/service-proxy.ts

@@ -0,0 +1,26 @@
+import { ServiceIdentifierMap, ServiceRegistry } from '#/core/shared-service/service-registry';
+
+// core/ServiceProxy.ts
+export function createServiceProxy<T extends object, K extends keyof ServiceIdentifierMap>(
+  serviceId: K,
+  container: ServiceRegistry
+): T {
+  return new Proxy({} as T, {
+    get(target, prop, receiver) {
+      const actualService = container.getRawInstance(serviceId);
+
+      if (!actualService) {
+        return (..._: unknown[]) => {
+          console.warn(
+            `[System] Service ${serviceId} is currently unavailable. Call to ${String(prop)} ignored.`
+          );
+          return undefined; // 或者返回一个待定 Promise
+        };
+      }
+
+      // 3. 正常转发调用
+      const value = Reflect.get(actualService, prop, receiver);
+      return typeof value === 'function' ? value.bind(actualService) : value;
+    },
+  });
+}

package/src/core/shared-service/service-registry.ts

@@ -0,0 +1,52 @@
+import { createServiceProxy } from './service-proxy';
+
+export interface ServiceIdentifierMap {}
+
+export class ServiceRegistry {
+  private services: Map<string, unknown> = new Map();
+
+  private constructor() {}
+
+  private static instance: ServiceRegistry;
+
+  static getInstance(): ServiceRegistry {
+    if (!ServiceRegistry.instance) {
+      ServiceRegistry.instance = new ServiceRegistry();
+    }
+    return ServiceRegistry.instance;
+  }
+
+  register<T extends keyof ServiceIdentifierMap>(name: T, service: ServiceIdentifierMap[T]): void {
+    if (this.services.has(name)) {
+      console.warn(`Service with name ${name} is already registered. It will be overwritten.`);
+    }
+    this.services.set(name, service);
+  }
+
+  getRawInstance<T extends keyof ServiceIdentifierMap>(
+    name: T
+  ): ServiceIdentifierMap[T] | undefined {
+    const target = this.services.get(name);
+    if (!target) {
+      console.warn(`Service with name ${name} is not registered.`);
+      return undefined;
+    }
+
+    return target as ServiceIdentifierMap[T];
+  }
+
+  get<T extends keyof ServiceIdentifierMap>(name: T): ServiceIdentifierMap[T] | undefined {
+    // const target = this.services.get(name);
+    // if (!target) {
+    //   console.warn(`Service with name ${name} is not registered.`);
+    //   return undefined;
+    // }
+
+    // return target as ServiceIdentifierMap[T];
+    return createServiceProxy(name, this) as ServiceIdentifierMap[T];
+  }
+
+  unregister<T extends keyof ServiceIdentifierMap>(name: T): void {
+    this.services.delete(name);
+  }
+}

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

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { useBlogSlotComp } from '../hooks/use_blog_slot_com';
+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} />
+      ))}
+    </>
+  );
+};

package/src/plugins/blog/components/article/index.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement, ReactNode } from 'react';
 import { Article, Link } from '@bbki.ng/ui';
 import classNames from 'classnames';
 
-import { Slot } from '#/core/components/SlotComp';
+import { Slot } from '../BlogSlotCom';
 
 export type ArticlePageProps = {
   tags?: string[];
@@ -27,7 +27,7 @@ export const ArticlePage = (props: ArticlePageProps) => {
   return (
     <>
       <Article
-        title={<Slot name="articleTitle" data={title} placeholder={<>{title}</>} />}
+        title={<Slot name="blog:articleTitle" data={title} placeholder={<>{title}</>} />}
         date={props.date}
         description={description}
         className={`${props.className || ''}`}

package/src/plugins/blog/context/index.ts

@@ -1,10 +1,6 @@
-import type React from 'react';
-
-import { ISlotProps } from '#/core/components/SlotComp';
 import { createPluginCtx } from '#/core/context';
 
 export interface IBlogContext {
-  Slot: React.FC<ISlotProps>;
   setLoading: (loading: boolean) => void;
 }
 

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

@@ -0,0 +1,79 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+
+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;
+};

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

@@ -15,7 +15,7 @@ function saveScrollPosition(key: string, position: number) {
 
 export function useBlogScrollReset() {
   useEffect(() => {
-    const element = document.getElementById('blog');
+    const element = document.getElementById('app');
     if (!element) return;
 
     element.scrollTop = 0;
@@ -23,7 +23,7 @@ export function useBlogScrollReset() {
 }
 
 export function useBlogScroll() {
-  const element = document.getElementById('blog');
+  const element = document.getElementById('app');
 
   const gotoTop = useCallback(() => {
     if (!element) return;

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

@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from 'react';
+
+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;
+};

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

@@ -2,10 +2,11 @@ import useSWR from 'swr';
 import { useEffect, useMemo, useState } from 'react';
 
 import { IPost } from '#/types/posts';
-import { useMiddlewareRunner } from '#/core/hooks/useMiddlewareTransData';
 
 import { BlogContext } from '../context';
 
+import { useMiddlewareRunner } from './useMiddlewareTransData';
+
 interface PostsApiResponse {
   data: IPost[];
   // 可能还有其他字段如 status, message 等
@@ -46,7 +47,7 @@ export const usePosts = (name: string = '', suspense?: boolean) => {
     error: transformError,
     run,
   } = useMiddlewareRunner<TitleListItem[]>({
-    hookPoint: 'transformTitleList',
+    hookPoint: 'blog:transformTitleList',
   });
 
   useEffect(() => {

package/src/plugins/blog/index.ts

@@ -1,27 +1,44 @@
-import { BBPlugin } from '#/core/bbplugin';
-import { Slot } from '#/core/components/SlotComp';
+import { BBPlugin } from '#/core/plugin-system/bbplugin';
+import { SystemUIService } from '#/core/plugin-system/services/systemUIService';
+import { ServiceRegistry } from '#/core/shared-service/service-registry';
 import { IHostContext } from '#/types/hostApi';
 import { PluginID } from '#/types/plugin';
 
 import { BlogPageApp } from './components/app';
 import { BlogContext } from './context';
+import { BlogUIService } from './services/BlogUIService';
 
 const { withCtx } = BlogContext;
 
 export class BlogPlugin extends BBPlugin {
   id: PluginID = 'blog';
 
+  private _serviceRegistry?: ServiceRegistry;
+
   override onInstall = async (ctx: IHostContext) => {
-    ctx.api.registerEntry(
+    ctx.service.register('blog:uiService', BlogUIService.getInstance());
+
+    this._serviceRegistry = ctx.service;
+
+    const coreService = ctx.service.get('core:baseService');
+    const systemUIService = ctx.service.get('core:uiService');
+
+    if (!coreService) {
+      console.error('Core service not found. BlogPlugin installation failed.');
+      return;
+    }
+
+    coreService.subscribePluginUninstall(this.handlePluginUninstall);
+
+    systemUIService?.registerPluginEntry(
       {
         path: '/blog',
         label: 'cd ./blog',
         pageComponent: withCtx(
           {
             setLoading: loading => {
-              ctx.api.setLoading('blog', loading);
+              coreService.setLoading('blog', loading);
             },
-            Slot: Slot,
           },
           BlogPageApp
         ),
@@ -29,6 +46,16 @@ export class BlogPlugin extends BBPlugin {
       this.id
     );
   };
+
+  override onDestroy?: (() => void) | undefined = () => {
+    BlogUIService.getInstance().unregisterAllByPluginId(this.id);
+    this._serviceRegistry?.unregister('blog:uiService');
+  };
+
+  private handlePluginUninstall = (payload: PluginID) => {
+    BlogUIService.getInstance().unregisterAllByPluginId(payload);
+    SystemUIService.getInstance().unregisterAllByPluginId(payload);
+  };
 }
 
 export default new BlogPlugin();

package/src/plugins/blog/pages/extensions/txt/article.tsx

@@ -5,7 +5,7 @@ import { useParams } from 'react-router-dom';
 import { usePosts } from '#/plugins/blog/hooks/use_posts';
 import { ArticlePage } from '#/plugins/blog/components/article';
 import { useBlogScrollReset } from '#/plugins/blog/hooks/use_blog_scroll_pos_restoration';
-import { useMiddlewareTransformedData } from '#/core/hooks/useMiddlewareTransData';
+import { useMiddlewareTransformedData } from '#/plugins/blog/hooks/useMiddlewareTransData';
 import { IPost } from '#/types/posts';
 
 function TxtArticle() {
@@ -16,7 +16,7 @@ function TxtArticle() {
 
   const p = posts as IPost;
 
-  const transformedContent = useMiddlewareTransformedData('transformPostContent', p?.content);
+  const transformedContent = useMiddlewareTransformedData('blog:transformPostContent', p?.content);
 
   if (!title) {
     return <NotFound />;