@bbki.ng/site 5.6.7 → 5.8.0

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/{blog → plugins/blog}/hooks/use_blog_scroll_pos_restoration.ts

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useRef } from 'react';
-import { useLocation } from 'react-router-dom';
 
 const SCROLL_STORAGE_KEY = 'div-scroll-positions';
 
@@ -16,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;
@@ -24,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;
@@ -42,7 +41,6 @@ export function useBlogScroll() {
 }
 
 export function useBlogScrollRestoration(debounceMs: number = 100) {
-  const location = useLocation();
   const isFirstRender = useRef(true);
   const scrollTimeoutRef = useRef<number>();
   const element = document.getElementById('blog');
@@ -62,7 +60,7 @@ export function useBlogScrollRestoration(debounceMs: number = 100) {
       element.scrollTop = savedPosition;
     });
     isFirstRender.current = false;
-  }, []);
+  }, [element, scrollKey]);
 
   // Save scroll position with debouncing
   useEffect(() => {
@@ -87,5 +85,5 @@ export function useBlogScrollRestoration(debounceMs: number = 100) {
     return () => {
       element.removeEventListener('scroll', handleScroll);
     };
-  }, []);
+  }, [debounceMs, element, scrollKey]);
 }

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/{blog → plugins/blog}/hooks/use_posts.ts

@@ -1,14 +1,11 @@
 import useSWR from 'swr';
 import { useEffect, useMemo, useState } from 'react';
 
-import { useGlobalLoading } from '@/hooks';
-import { baseFetcher } from '@/utils';
-import { API_ENDPOINT } from '@/constants/routes';
 import { IPost } from '#/types/posts';
-import { useMiddlewareRunner } from '#/core/hooks/useMiddlewareTransData';
 
-const isProd = true;
-const POSTS_API = !isProd ? '/api/posts' : `${API_ENDPOINT}/posts`;
+import { BlogContext } from '../context';
+
+import { useMiddlewareRunner } from './useMiddlewareTransData';
 
 interface PostsApiResponse {
   data: IPost[];
@@ -23,11 +20,13 @@ export interface TitleListItem {
 }
 
 export const usePosts = (name: string = '', suspense?: boolean) => {
-  const { data: response, error: swrError } = useSWR<PostsApiResponse>(POSTS_API, baseFetcher, {
+  const { data: response, error: swrError } = useSWR<PostsApiResponse>('posts', {
     revalidateOnFocus: false,
     suspense,
   });
 
+  const { setLoading } = BlogContext.useCtx();
+
   const data = response?.data;
   const isDataLoading = !data && !swrError;
 
@@ -43,13 +42,12 @@ export const usePosts = (name: string = '', suspense?: boolean) => {
 
   const [fullTitleList, setFullTitleList] = useState<TitleListItem[]>(baseTitleList);
 
-  // Use middleware hook to transform title list
   const {
     loading: isTransforming,
     error: transformError,
     run,
   } = useMiddlewareRunner<TitleListItem[]>({
-    hookPoint: 'transformTitleList',
+    hookPoint: 'blog:transformTitleList',
   });
 
   useEffect(() => {
@@ -58,7 +56,9 @@ export const usePosts = (name: string = '', suspense?: boolean) => {
     }
   }, [baseTitleList, run]);
 
-  const { isLoading: gLoading } = useGlobalLoading('posts', isDataLoading || isTransforming);
+  useEffect(() => {
+    setLoading(isDataLoading || isTransforming);
+  }, [isDataLoading, isTransforming, setLoading]);
 
   const posts =
     isDataLoading || name === '' || swrError || !data
@@ -69,6 +69,6 @@ export const usePosts = (name: string = '', suspense?: boolean) => {
     posts,
     titleList: fullTitleList ?? [],
     isError: swrError || transformError,
-    isLoading: gLoading,
+    isLoading: isDataLoading || isTransforming,
   };
 };

package/src/plugins/blog/index.ts

@@ -0,0 +1,61 @@
+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.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 => {
+              coreService.setLoading('blog', loading);
+            },
+          },
+          BlogPageApp
+        ),
+      },
+      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/{blog → plugins/blog}/pages/extensions/txt/article.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { NotFound } from '@bbki.ng/ui';
 import { useParams } from 'react-router-dom';
 
-import { usePosts } from '@/hooks/use_posts';
-import { ArticlePage } from '@/components/article';
-import { useBlogScrollReset } from '@/hooks/use_blog_scroll_pos_restoration';
-import { useMiddlewareTransformedData } from '#/core/hooks/useMiddlewareTransData';
+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 '#/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 />;

package/src/{blog → plugins/blog}/pages/extensions/txt/index.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import { LinkProps, Button } from '@bbki.ng/ui';
 
-import { usePosts } from '@/hooks/use_posts';
-import { CenterLinkList } from '@/components';
-import { useBlogScroll, useBlogScrollRestoration } from '@/hooks/use_blog_scroll_pos_restoration';
+import { usePosts } from '#/plugins/blog/hooks/use_posts';
+import { CenterLinkList } from '#/plugins/blog/components';
+import {
+  useBlogScroll,
+  useBlogScrollRestoration,
+} from '#/plugins/blog/hooks/use_blog_scroll_pos_restoration';
 
 type TxtProps = {
   title?: string;

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

@@ -0,0 +1,120 @@
+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 { BlogDataHookPoint, BlogSlotName, IBlogUIService } from './IBlogUIService';
+
+type RegistryEvents = {
+  'blog:slots:changed': void;
+  'blog:middleware:changed': BlogDataHookPoint;
+};
+
+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();
+    }
+    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;
+  }
+}

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

@@ -0,0 +1,31 @@
+import type React from 'react';
+
+import { type IBaseUIService } from '#/core/shared-service/contract/IUIService';
+
+declare module '#/core/shared-service/service-registry' {
+  interface ServiceIdentifierMap {
+    'blog:uiService': IBlogUIService;
+  }
+}
+
+export type BlogSlotName = 'blog:articleActionRow' | 'blog:articleTitle';
+
+export type BlogDataHookPoint =
+  | 'blog:filterPosts'
+  | '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;
+}

package/src/plugins/extra-cd/index.ts

@@ -1,4 +1,4 @@
-import { BBPlugin } from '#/core/bbplugin';
+import { BBPlugin } from '#/core/plugin-system/bbplugin';
 import { IHostContext } from '#/types/hostApi';
 import { PluginID } from '#/types/plugin';
 import { TitleListItem } from '#/types/posts';
@@ -7,7 +7,18 @@ class ExtraCd extends BBPlugin {
   id: PluginID = 'extra-cd';
 
   override onInstall = async (ctx: IHostContext): Promise<void> => {
-    ctx.api.registerMiddleware('transformTitleList', this.transformTitleList, this.id, 10);
+    const blogUIService = ctx.service.get('blog:uiService');
+    if (!blogUIService) {
+      console.error('Blog UI service not found. ExtraCd installation failed.');
+      return;
+    }
+
+    blogUIService.registerMiddleware(
+      'blog:transformTitleList',
+      this.transformTitleList,
+      this.id,
+      10
+    );
   };
 
   private transformTitleList = (titleList: Array<TitleListItem>) => {

package/src/plugins/extra-entry/index.ts

@@ -1,7 +1,6 @@
-import { BBPlugin } from '#/core/bbplugin';
+import { BBPlugin } from '#/core/plugin-system/bbplugin';
 import { IHostContext } from '#/types/hostApi';
 import { PluginID } from '#/types/plugin';
-import { buildEntryCreator } from '#/utils';
 
 import { ExtendedRoutesPage } from './components/page';
 
@@ -9,8 +8,13 @@ export class ExtraEntryPlugin extends BBPlugin {
   id: PluginID = 'extra-entry';
 
   override onInstall = async (ctx: IHostContext): Promise<void> => {
-    const entryCreator = buildEntryCreator(ctx);
-    entryCreator(
+    const systemUIService = ctx.service.get('core:uiService');
+    if (!systemUIService) {
+      console.warn(`[${this.id}] core:uiService not found, cannot register entry`);
+      return;
+    }
+
+    systemUIService.registerPluginEntry(
       {
         pageComponent: ExtendedRoutesPage,
         path: '/hello',

package/src/plugins/fx/index.ts

@@ -1,4 +1,4 @@
-import { BBPlugin } from '#/core/bbplugin';
+import { BBPlugin } from '#/core/plugin-system/bbplugin';
 import { IHostContext } from '#/types/hostApi';
 import { PluginID } from '#/types/plugin';
 
@@ -9,14 +9,27 @@ class FxPlugin extends BBPlugin {
   id: PluginID = 'fx';
 
   override onInstall = async (ctx: IHostContext) => {
-    ctx.api.registerSlot(
+    const coreService = ctx.service.get('core:baseService');
+
+    if (!coreService) {
+      console.error('Core service not found. FxPlugin installation failed.');
+      return;
+    }
+
+    const systemUIService = ctx.service.get('core:uiService');
+    if (!systemUIService) {
+      console.error('UI service not found. FxPlugin installation failed.');
+      return;
+    }
+
+    systemUIService.registerSlot(
       'pageFooter',
       FxContext.withCtx(
         {
-          versionHash: await ctx.api.getVersionHash(),
-          deviceId: (await ctx.api.getDeviceId()).id,
+          versionHash: await coreService.getVersionHash(),
+          deviceId: (await coreService.getDeviceId())?.id,
           subscribeToLoading: listener => {
-            return ctx.api.onLoadingChanged(listener);
+            return coreService.subscribeLoadingChange(listener);
           },
         },
         FxCom

package/src/plugins/manifest.ts

@@ -26,6 +26,7 @@ export const FALLBACK_MANIFEST: Array<IPluginManifestEntry> = [
     version: '0.1.0',
     description:
       '提供额外的页面跳转链接。例如在标题列表末尾添加一个 "cd ~" 的选项，点击后跳转到主页',
+    dependencies: ['blog'],
   },
   {
     name: '特效',
@@ -33,16 +34,17 @@ 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: '博客',
+    id: 'blog',
+    version: '0.1.0',
+    description: '一个简单的博客系统，支持 Markdown 格式的文章',
   },
 ];

package/src/plugins/now/hooks/use_streaming.ts

@@ -74,7 +74,9 @@ export function useStreaming(options: UseStreamingOptions = {}) {
     });
   }, []);
 
-  nowCtx.setLoading(isLoading);
+  useEffect(() => {
+    nowCtx.setLoading(isLoading);
+  }, [nowCtx, isLoading]);
 
   return {
     streaming: data?.data ?? [],

package/src/plugins/now/index.ts

@@ -1,7 +1,6 @@
-import { BBPlugin } from '#/core/bbplugin';
+import { BBPlugin } from '#/core/plugin-system/bbplugin';
 import { IHostContext } from '#/types/hostApi';
 import { PluginID } from '#/types/plugin';
-import { buildEntryCreator } from '#/utils';
 
 import { pageNow } from './components';
 import { NowCtx } from './context';
@@ -10,19 +9,31 @@ export class NowPlugin extends BBPlugin {
   id: PluginID = 'now';
 
   override onInstall = async (ctx: IHostContext): Promise<void> => {
-    const nowEntryCreator = buildEntryCreator(ctx);
+    const systemUIService = ctx.service.get('core:uiService');
+    if (!systemUIService) {
+      console.warn(`[${this.id}] core:uiService not found, cannot register entry`);
+      return;
+    }
     const { withCtx } = NowCtx;
 
-    nowEntryCreator(
+    const coreService = ctx.service.get('core:baseService');
+
+    if (!coreService) {
+      console.error('Core service not found. NowPlugin installation failed.');
+      return;
+    }
+
+    systemUIService.registerPluginEntry(
       {
         path: '/now',
         label: 'cd ./now',
         pageComponent: withCtx(
           {
             setLoading: loading => {
-              ctx.api.setLoading('now', loading);
+              // ctx.api.setLoading('now', loading);
+              coreService.setLoading('now', loading);
             },
-            fetch: ctx.api.fetch,
+            fetch: coreService.fetch, // 直接使用 coreService 的 fetch 方法
           },
           pageNow
         ),

package/src/plugins/sticker/const.ts

@@ -5,7 +5,7 @@ export const STICKERS: IStickerConfig[] = [
     id: 'copilot',
     imageUrl: '/stickers/copilot.svg',
     rotation: 20,
-    maxWidth: 100,
+    maxWidth: 60,
     aspectRatio: '505/410',
     xOffset: 0,
     yOffset: 0,
@@ -41,7 +41,7 @@ export const STICKERS: IStickerConfig[] = [
     id: 'vite',
     imageUrl: '/stickers/vitejs.svg',
     rotation: -5,
-    maxHeight: 180,
+    maxWidth: 30,
     aspectRatio: '512/512',
     xOffset: 100,
     yOffset: -30,