@bbki.ng/site 5.6.2 → 5.6.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @bbki.ng/site
 
+## 5.6.4
+
+### Patch Changes
+
+- d1b95ed: add api to fetch manifest
+
+## 5.6.3
+
+### Patch Changes
+
+- 2d1528a: fix fx loading state
+
 ## 5.6.2
 
 ### Patch Changes

package/package.json

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

package/src/blog/utils/fingerprints.ts

@@ -9,6 +9,8 @@ export interface FingerprintData {
   generatedAt: number;
 }
 
+type GLenum = number;
+
 export interface FingerprintComponents {
   // 基础环境
   userAgent: string;
@@ -143,7 +145,7 @@ function getWebGLInfo(): WebGLInfo {
 
     params.forEach(p => {
       try {
-        const val = gl.getParameter((gl as any)[p]);
+        const val = gl.getParameter((gl as unknown as Record<string, GLenum>)[p] as GLenum);
         result.params[p] = Array.isArray(val) ? val.join(',') : String(val);
       } catch {
         result.params[p] = 'unsupported';
@@ -220,7 +222,10 @@ function getFontList(): string[] {
 // 音频指纹（频率响应差异）
 async function getAudioFingerprint(): Promise<string | undefined> {
   try {
-    const AudioContext = window.OfflineAudioContext || (window as any).webkitOfflineAudioContext;
+    const AudioContext =
+      window.OfflineAudioContext ||
+      (window as unknown as { webkitOfflineAudioContext?: typeof OfflineAudioContext })
+        .webkitOfflineAudioContext;
     if (!AudioContext) return undefined;
 
     const ctx = new AudioContext(1, 44100, 44100);
@@ -271,7 +276,7 @@ async function getFingerprint(): Promise<FingerprintData> {
     platform: navigator.platform,
     cookieEnabled: navigator.cookieEnabled,
     hardwareConcurrency: navigator.hardwareConcurrency || 0,
-    deviceMemory: (navigator as any).deviceMemory,
+    deviceMemory: (navigator as unknown as { deviceMemory?: number }).deviceMemory,
     maxTouchPoints: navigator.maxTouchPoints || 0,
     screenResolution: `${screen.width}x${screen.height}`,
     screenColorDepth: screen.colorDepth,

package/src/core/bbplugin.ts

@@ -1,13 +1,14 @@
-import { ManifestMap } from '#/plugins/manifest';
 import { IHostContext } from '#/types/hostApi';
 import { IPlugin, IPluginManifestEntry, PluginID } from '#/types/plugin';
 
+import { PluginManifestService } from './pluginManifestService';
+
 export class BBPlugin implements IPlugin {
   id: PluginID = 'default';
   onInstall?: ((ctx: IHostContext) => void | Promise<void>) | undefined;
   onDisable?: (() => Promise<void> | void) | undefined;
   onDestroy?: (() => void) | undefined;
   getMeta(): IPluginManifestEntry {
-    return ManifestMap.get(this.id) as IPluginManifestEntry;
+    return PluginManifestService.getInstance().getPlugin(this.id) as IPluginManifestEntry;
   }
 }

package/src/core/hooks/use_plugins.ts

@@ -1,13 +1,18 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { useGlobalLoading } from '@/hooks';
 import { pluginManager } from '#/core/pluginManager';
 import { PluginID } from '#/types/plugin';
 
+import { PluginManifestService } from '../pluginManifestService';
 import { PluginStore } from '../pluginStore';
 
 const usePluginsLoading = () => {
-  const { setGlobalLoading } = useGlobalLoading();
+  const { setGlobalLoading, isLoading } = useGlobalLoading();
+
+  useEffect(() => {
+    pluginManager.notifySiteLoadingChanged(isLoading);
+  }, [isLoading]);
 
   useEffect(() => {
     let unregister: (() => void) | undefined;
@@ -42,26 +47,41 @@ export const usePlugins = () => {
 
   usePluginsLoading();
 
-  const loadAllPlugins = useCallback(async () => {
-    try {
-      await Promise.all(pluginIds.map(id => pluginManager.loadPlugin(id)));
-      setDone(true);
-    } catch (error) {
-      console.error('Error loading plugins:', error);
-    }
-  }, [pluginIds]);
-
   useEffect(() => {
-    // 加载指定的插件
-    loadAllPlugins();
+    let cancelled = false;
+
+    PluginManifestService.getInstance()
+      .fetch()
+      .then(() => {
+        if (cancelled) {
+          return;
+        }
+        Promise.all(pluginIds.map(id => pluginManager.loadPlugin(id)))
+          .then(() => {
+            if (!cancelled) {
+              setDone(true);
+            }
+          })
+          .catch(error => {
+            if (!cancelled) {
+              console.error('Error loading plugins:', error);
+            }
+          });
+      })
+      .catch(error => {
+        if (!cancelled) {
+          console.error('Error fetching plugin manifest:', error);
+        }
+      });
 
     return () => {
+      cancelled = true;
       // 卸载所有指定的插件
       pluginIds.forEach(id => {
         pluginManager.disablePlugin(id);
       });
     };
-  }, [loadAllPlugins, pluginIds]);
+  }, [pluginIds]);
 
   return done;
 };

package/src/core/pluginManager.ts

@@ -4,6 +4,7 @@ import { IHostContext } from '#/types/hostApi';
 import type { SlotName, HookPoint, IComPropsRegisteredToSlot } from '#/types/slots';
 import { IPlugin, PluginEvents, PluginID, PluginPerm } from '#/types/plugin';
 import { getStableDeviceId } from '@/utils/fingerprints';
+import { cfApiFetcher } from '@/utils';
 
 import { registry } from './registry';
 import { createEventBus } from './utils/eventBus';
@@ -27,9 +28,13 @@ class PluginManager {
     return {
       ...adminCtx,
       api: {
+        fetch: cfApiFetcher,
         setLoading: (id: PluginID, loading: boolean) => {
           this.bus.emit('plugin:loading:changed', { id, loading });
         },
+        onLoadingChanged: (listener: (payload: PluginEvents['site:loading:changed']) => void) => {
+          return this.bus.on('site:loading:changed', listener);
+        },
         registerMiddleware: <T>(
           point: HookPoint,
           fn: (data: T) => Promise<T> | T,
@@ -58,6 +63,10 @@ class PluginManager {
 
   private loading = new Set<string>();
 
+  notifySiteLoadingChanged(loading: boolean) {
+    this.bus.emit('site:loading:changed', loading);
+  }
+
   subscribePluginLoading(listener: (payload: PluginEvents['plugin:loading:changed']) => void) {
     return this.bus.on('plugin:loading:changed', listener);
   }

package/src/core/pluginManifestService.ts

@@ -0,0 +1,123 @@
+import { cfApiFetcher } from '@/utils';
+import { FALLBACK_MANIFEST } from '#/plugins/manifest';
+import { IPluginManifestEntry, PluginID } from '#/types/plugin';
+
+const KnownPluginIDSet = new Set<string>([
+  'sticker',
+  'xwy',
+  'extra-cd',
+  'extra-entry',
+  'store',
+  'now',
+  'default',
+  'fx',
+]);
+
+interface PluginsApiResponse {
+  status: string;
+  data: Array<{
+    id: string;
+    name: string;
+    version: string;
+    description?: string;
+    perm?: string;
+    icon?: string;
+    dependencies?: string;
+  }>;
+}
+
+class PluginManifestService {
+  private static instance: PluginManifestService;
+
+  private manifestMap: Map<string, IPluginManifestEntry> = new Map();
+
+  private fetched = false;
+
+  private fetchPromise: Promise<void> | null = null;
+
+  private constructor() {
+    this.initWithFallback();
+  }
+
+  private initWithFallback = () => {
+    this.manifestMap = new Map(FALLBACK_MANIFEST.map(entry => [entry.id, entry]));
+  };
+
+  async fetch(): Promise<void> {
+    if (this.fetched) {
+      return;
+    }
+    if (this.fetchPromise) {
+      return this.fetchPromise;
+    }
+
+    this.fetchPromise = (async () => {
+      try {
+        const res = await cfApiFetcher<PluginsApiResponse>('plugins');
+        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 {
+                  const parsed = JSON.parse(item.dependencies) as string[];
+                  dependencies = parsed.filter((id): id is PluginID => KnownPluginIDSet.has(id));
+                } catch {
+                  console.warn(
+                    `[PluginManifestService] Failed to parse dependencies for plugin: ${item.id}`
+                  );
+                }
+              }
+
+              return {
+                id: item.id as PluginID,
+                name: item.name,
+                version: item.version,
+                description: item.description,
+                perm: (item.perm as 'guest' | 'admin' | undefined) || 'guest',
+                icon: item.icon,
+                dependencies,
+              };
+            })
+            .filter((item): item is IPluginManifestEntry => item !== null);
+
+          this.manifestMap = new Map(validated.map(entry => [entry.id, entry]));
+        }
+        this.fetched = true;
+      } catch (error) {
+        console.error('[PluginManifestService] Failed to fetch manifest:', error);
+        // Keep fallback data
+      }
+    })();
+
+    return this.fetchPromise;
+  }
+
+  getPlugin(id: string): IPluginManifestEntry | undefined {
+    return this.manifestMap.get(id);
+  }
+
+  getAllPlugins(): IPluginManifestEntry[] {
+    return Array.from(this.manifestMap.values());
+  }
+
+  reset(): void {
+    this.fetched = false;
+    this.fetchPromise = null;
+    this.initWithFallback();
+  }
+
+  static getInstance() {
+    if (!PluginManifestService.instance) {
+      PluginManifestService.instance = new PluginManifestService();
+    }
+    return PluginManifestService.instance;
+  }
+}
+
+export { PluginManifestService };

package/src/core/pluginStore.ts

@@ -1,7 +1,7 @@
-import { PLUGIN_MANIFEST } from '#/plugins/manifest';
 import { IPluginStoreEntry, PluginID } from '#/types/plugin';
 
 import { pluginManager } from './pluginManager';
+import { PluginManifestService } from './pluginManifestService';
 
 export class PluginStore {
   private static instance: PluginStore;
@@ -35,13 +35,15 @@ export class PluginStore {
     return this.parse();
   };
 
-  getAllPlugins: () => Array<IPluginStoreEntry> = () => {
+  async getAllPlugins(): Promise<Array<IPluginStoreEntry>> {
     const installedPlugins = this.getInstalledPlugins();
-    return PLUGIN_MANIFEST.map(plugin => ({
+    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);

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

@@ -1,30 +1,39 @@
 import React, { useMemo } from 'react';
-import { EffectLayer, grain, paper, /*spiral,*/ watermark, Effect } from '@bbki.ng/ui';
+import { EffectLayer, grain, paper, spiral, watermark, Effect } from '@bbki.ng/ui';
 
 import { IComPropsRegisteredToSlot } from '#/types/slots';
 
 import { FxContext } from '../context';
 
+const useLoadingState = () => {
+  const ctx = FxContext.useCtx();
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  React.useEffect(() => {
+    const unsubscribe = ctx.subscribeToLoading(setIsLoading);
+    return () => {
+      unsubscribe();
+    };
+  }, [ctx]);
+
+  return isLoading;
+};
+
 export const FxCom = (_: IComPropsRegisteredToSlot) => {
   const ctx = FxContext.useCtx();
   const hashStr = ctx.versionHash;
   const deviceId = ctx.deviceId;
+  const isLoading = useLoadingState();
 
-  // const { isLoading } = useContext(GlobalLoadingContext);
-  // const { deviceId } = useFingerprint();
+  console.log('is loading', isLoading);
 
   const effects: Effect[] = useMemo(() => {
     const wmLines = [hashStr];
     if (deviceId) wmLines.push(deviceId);
     wmLines.push('hello world');
 
-    return [
-      grain(),
-      paper(),
-      // spiral({ active: isLoading }),
-      watermark({ lines: wmLines }),
-    ];
-  }, [/*isLoading,*/ deviceId, hashStr]);
+    return [grain(), paper(), spiral({ active: isLoading }), watermark({ lines: wmLines })];
+  }, [isLoading, deviceId, hashStr]);
 
   return <EffectLayer effects={effects} />;
 };

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

@@ -1,8 +1,12 @@
 import { createPluginCtx } from '#/core/context';
+import { PluginEvents } from '#/types/plugin';
 
 export interface IFxContext {
   versionHash: string;
   deviceId: string;
+  subscribeToLoading: (
+    listener: (payload: PluginEvents['site:loading:changed']) => void
+  ) => () => void;
 }
 
 export const FxContext = createPluginCtx<IFxContext>();

package/src/plugins/fx/index.ts

@@ -15,6 +15,9 @@ class FxPlugin extends BBPlugin {
         {
           versionHash: await ctx.api.getVersionHash(),
           deviceId: (await ctx.api.getDeviceId()).id,
+          subscribeToLoading: listener => {
+            return ctx.api.onLoadingChanged(listener);
+          },
         },
         FxCom
       ),

package/src/plugins/manifest.ts

@@ -1,6 +1,6 @@
 import { IPluginManifestEntry } from '#/types/plugin';
 
-export const PLUGIN_MANIFEST: Array<IPluginManifestEntry> = [
+export const FALLBACK_MANIFEST: Array<IPluginManifestEntry> = [
   {
     name: '贴纸',
     id: 'sticker',
@@ -25,14 +25,13 @@ export const PLUGIN_MANIFEST: Array<IPluginManifestEntry> = [
     id: 'extra-cd',
     version: '0.1.0',
     description:
-      '提供额外的快速切换页面的捷径，例如在标题列表末尾添加一个 "cd ~" 的选项，点击后跳转到主页',
+      '提供额外的页面跳转链接。例如在标题列表末尾添加一个 "cd ~" 的选项，点击后跳转到主页',
   },
   {
     name: '特效',
     id: 'fx',
     version: '0.1.0',
-    description:
-      '提供一些额外的视觉效果。此外，页面左下角会显示当前版本的哈希值和设备标识哈希水印。',
+    description: '提供一些额外的视觉效果。例如版本、设备信息水印，加载状态螺旋线、背景纹理等',
   },
   // {
   //   name: 'extra-entry',
@@ -47,8 +46,3 @@ export const PLUGIN_MANIFEST: Array<IPluginManifestEntry> = [
     description: '为小乌鸦合集实现定制功能或者样式的插件',
   },
 ];
-
-export const ManifestMap = PLUGIN_MANIFEST.reduce((map, entry) => {
-  map.set(entry.id, entry);
-  return map;
-}, new Map<string, IPluginManifestEntry>());

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

@@ -1,7 +1,10 @@
+import { Fetcher } from 'swr';
+
 import { createPluginCtx } from '#/core/context';
 
 export interface INowCtx {
   setLoading: (loading: boolean) => void;
+  fetch: Fetcher;
 }
 
 export const NowCtx = createPluginCtx<INowCtx>();

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

@@ -1,15 +1,8 @@
-import useSWR from 'swr';
+import useSWR, { type BareFetcher } from 'swr';
 import { useEffect, useState } from 'react';
 
-import { baseFetcher } from '@/utils';
-
 import { NowCtx } from '../context';
 
-// In dev, use /api prefix to leverage Vite proxy to localhost:8787
-// const isProd = typeof window !== 'undefined' && /^https:\/\/bbki.ng/.test(window.location.href);
-const isProd = true;
-const API_BASE = !isProd ? '/api' : 'https://cf.bbki.ng';
-
 export type StreamingItem = {
   id: string;
   author: string;
@@ -32,41 +25,13 @@ export interface StreamingQueryParams {
   offset?: number;
 }
 
-/**
- * Build streaming API URL with query parameters
- */
-function buildStreamingUrl(params: StreamingQueryParams = {}): string {
-  const url = new URL(`${API_BASE}/streaming`, !isProd ? window.location.origin : undefined);
-
-  if (params.before) {
-    url.searchParams.set('before', params.before);
-  }
-  if (params.after) {
-    url.searchParams.set('after', params.after);
-  }
-  if (params.offset) {
-    url.searchParams.set('offset', params.offset.toString());
-  }
-
-  return !isProd ? url.pathname + url.search : url.toString();
-}
-
-/**
- * Fetch streaming data from API
- */
-async function fetchStreaming(params: StreamingQueryParams = {}): Promise<StreamingResponse> {
-  const url = buildStreamingUrl(params);
-  const response = await baseFetcher(url);
-  return response as StreamingResponse;
-}
-
 // SWR key generator for streaming queries
 const getStreamingKey = (params: StreamingQueryParams) => {
   const parts = ['streaming'];
   if (params.before) parts.push(`before=${params.before}`);
   if (params.after) parts.push(`after=${params.after}`);
   if (params.offset) parts.push(`offset=${params.offset}`);
-  return parts.join('?');
+  return parts;
 };
 
 interface UseStreamingOptions {
@@ -83,12 +48,18 @@ interface UseStreamingOptions {
 export function useStreaming(options: UseStreamingOptions = {}) {
   const { refreshInterval = 1000, offset = 8 } = options;
 
+  const { fetch } = NowCtx.useCtx();
+
   const key = getStreamingKey({ offset });
 
-  const { data, error, mutate } = useSWR(key, () => fetchStreaming({ offset }), {
-    revalidateOnFocus: true,
-    refreshInterval,
-  });
+  const { data, error, mutate } = useSWR<StreamingResponse>(
+    key,
+    fetch as BareFetcher<StreamingResponse>,
+    {
+      revalidateOnFocus: true,
+      refreshInterval,
+    }
+  );
 
   const isLoading = !data && !error;
 

package/src/plugins/now/index.ts

@@ -22,6 +22,7 @@ export class NowPlugin extends BBPlugin {
             setLoading: loading => {
               ctx.api.setLoading('now', loading);
             },
+            fetch: ctx.api.fetch,
           },
           pageNow
         ),

package/src/plugins/store/components/storePage.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Button, Table } from '@bbki.ng/ui';
+import classNames from 'classnames';
+import { Button, Table, Link } from '@bbki.ng/ui';
 
 import { IComPropsRegisteredToSlot } from '#/types/slots';
 import { IPluginStoreEntry, PluginID } from '#/types/plugin';
@@ -163,13 +164,22 @@ export const StorePage = (_: IComPropsRegisteredToSlot) => {
   }
 
   return (
-    <div className="prose">
-      <Table
-        className="w-full"
-        rowCount={plugins.length}
-        headerRenderer={headerRenderer}
-        rowRenderer={rowRenderer}
-      />
-    </div>
+    <>
+      <div className="prose">
+        <Table
+          className="w-full"
+          rowCount={plugins.length}
+          headerRenderer={headerRenderer}
+          rowRenderer={rowRenderer}
+        />
+      </div>
+      <Link
+        className={classNames('w-fit relative transition-all duration-300 mt-16')}
+        to="/"
+        style={{ left: -4 }}
+      >
+        cd ..
+      </Link>
+    </>
   );
 };

package/src/plugins/store/index.ts

@@ -6,7 +6,7 @@ import { buildEntryCreator } from '#/utils';
 import { StorePage } from './components/storePage';
 import { StoreCtx } from './context';
 
-export class PluginStore extends BBPlugin {
+export class StorePlugin extends BBPlugin {
   id: PluginID = 'store';
   override onInstall = async (ctx: IHostContext): Promise<void> => {
     const entryCreator = buildEntryCreator(ctx);
@@ -19,9 +19,11 @@ export class PluginStore extends BBPlugin {
             install: ctx.store?.installPlugin || (async () => {}),
             uninstall: ctx.store?.disablePlugin || (async () => {}),
             isInstalled: ctx.store?.isPluginInstalled || ((_: PluginID) => false),
-            list: () => {
-              const installed = Array.from(ctx.store?.getAllPlugins() || []);
-              return installed.filter(({ id }) => id !== this.id);
+            list: async () => {
+              ctx.api.setLoading('store', true);
+              const all = Array.from((await ctx.store?.getAllPlugins()) || []);
+              ctx.api.setLoading('store', false);
+              return all.filter(({ id }) => id !== this.id);
             },
             setLoading: (loading: boolean) => {
               ctx.api.setLoading('store', loading);
@@ -35,4 +37,4 @@ export class PluginStore extends BBPlugin {
   };
 }
 
-export default new PluginStore();
+export default new StorePlugin();

package/src/types/hostApi.ts

@@ -1,15 +1,19 @@
 import React from 'react';
+import { Fetcher } from 'swr';
 
 import { type FingerprintData } from '@/utils/fingerprints';
 import { PluginStore } from '#/core/pluginStore';
 
 import { HookPoint, IComPropsRegisteredToSlot, SlotName } from './slots';
-import { PluginID } from './plugin';
+import { PluginEvents, PluginID } from './plugin';
 
 export interface IHostApi {
   getDeviceId: () => Promise<{ id: string; fp: FingerprintData }>;
   getVersionHash: () => Promise<string> | string;
   setLoading: (id: PluginID, loading: boolean) => void;
+  onLoadingChanged: (
+    listener: (payload: PluginEvents['site:loading:changed']) => void
+  ) => () => void;
   registerMiddleware: <T>(
     point: HookPoint,
     fn: (baseData: T) => T,
@@ -22,6 +26,7 @@ export interface IHostApi {
     pluginId: string,
     weight?: number
   ) => void;
+  fetch: Fetcher;
 }
 
 export type PluginInitializer = (api: IHostApi) => void;

package/src/types/plugin.ts

@@ -31,6 +31,7 @@ export interface IPluginEntry {
 
 export type PluginEvents = {
   'plugin:loading:changed': IPluginLoadingPayload;
+  'site:loading:changed': boolean;
 };
 
 export interface IPluginLoadingPayload {
@@ -46,6 +47,8 @@ export interface IPluginManifestEntry {
   version: string;
   description?: string;
   perm?: PluginPerm;
+  icon?: string;
+  dependencies?: PluginID[];
 }
 
 export interface IPluginStoreEntry extends IPluginManifestEntry {