@bbki.ng/site 5.6.0 → 5.6.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @bbki.ng/site
 
+## 5.6.2
+
+### Patch Changes
+
+- 72a0b48: add fx plugin
+
+## 5.6.1
+
+### Patch Changes
+
+- e4f8846: refactor
+
 ## 5.6.0
 
 ### Minor Changes

package/package.json

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

package/src/blog/components/BaseLayout.tsx

@@ -19,39 +19,42 @@ export const BaseLayout = () => {
   );
 
   return (
-    <Page
-      nav={
-        <Nav
-          paths={transformedPaths}
-          className="gradient-blur-cover select-none"
-          loading={isLoading}
-          customLogo={<Slot name="logo" data={defaultLogo} placeholder={defaultLogo} />}
-          style={{
-            paddingTop: 'calc(var(--safe-top) + 4px)',
-            transition: 'all .2s ease-in-out',
-          }}
-        />
-      }
-      main={
-        <Grid
-          leftAside={
-            <div className="py-32 px-6">
-              <Slot name="leftCol" data={paths} />
-            </div>
-          }
-          rightAside={
-            <div className="py-32 px-6">
-              <Slot name="rightCol" data={paths} />
-            </div>
-          }
-        >
-          <Container className="py-48">
-            <ErrorBoundary>
-              <Outlet />
-            </ErrorBoundary>
-          </Container>
-        </Grid>
-      }
-    />
+    <>
+      <Page
+        nav={
+          <Nav
+            paths={transformedPaths}
+            className="gradient-blur-cover select-none"
+            loading={isLoading}
+            customLogo={<Slot name="logo" data={defaultLogo} placeholder={defaultLogo} />}
+            style={{
+              paddingTop: 'calc(var(--safe-top) + 4px)',
+              transition: 'all .2s ease-in-out',
+            }}
+          />
+        }
+        main={
+          <Grid
+            leftAside={
+              <div className="py-32 px-6">
+                <Slot name="leftCol" data={paths} />
+              </div>
+            }
+            rightAside={
+              <div className="py-32 px-6">
+                <Slot name="rightCol" data={paths} />
+              </div>
+            }
+          >
+            <Container className="py-48">
+              <ErrorBoundary>
+                <Outlet />
+              </ErrorBoundary>
+            </Container>
+          </Grid>
+        }
+      />
+      <Slot name="pageFooter" />
+    </>
   );
 };

package/src/blog/context/bbcontext.tsx

@@ -2,14 +2,11 @@ import React, { ReactNode } from 'react';
 
 import { GlobalLoadingStateProvider } from '@/context/global_loading_state_provider';
 import { GlobalRoutesProvider } from '@/context/global_routes_provider';
-import { EffectContextProvider } from '@/components/effect-layer/EffectContextProvider';
 
 export const BBContext = (props: { children: ReactNode }) => {
   return (
     <GlobalLoadingStateProvider>
-      <GlobalRoutesProvider>
-        <EffectContextProvider>{props.children}</EffectContextProvider>
-      </GlobalRoutesProvider>
+      <GlobalRoutesProvider>{props.children}</GlobalRoutesProvider>
     </GlobalLoadingStateProvider>
   );
 };

package/src/core/pluginManager.ts

@@ -39,6 +39,11 @@ class PluginManager {
           registry.registerMiddleware(point, fn, pluginId, weight);
         },
         getDeviceId: getStableDeviceId,
+        getVersionHash: () => {
+          const hashStr: string =
+            typeof GLOBAL_COMMIT_HASH === 'string' ? GLOBAL_COMMIT_HASH : '0000000';
+          return hashStr;
+        },
         registerSlot: (
           slotName: SlotName,
           component: React.ComponentType<IComPropsRegisteredToSlot>,

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

@@ -0,0 +1,30 @@
+import React, { useMemo } from 'react';
+import { EffectLayer, grain, paper, /*spiral,*/ watermark, Effect } from '@bbki.ng/ui';
+
+import { IComPropsRegisteredToSlot } from '#/types/slots';
+
+import { FxContext } from '../context';
+
+export const FxCom = (_: IComPropsRegisteredToSlot) => {
+  const ctx = FxContext.useCtx();
+  const hashStr = ctx.versionHash;
+  const deviceId = ctx.deviceId;
+
+  // const { isLoading } = useContext(GlobalLoadingContext);
+  // const { deviceId } = useFingerprint();
+
+  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 <EffectLayer effects={effects} />;
+};

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

@@ -0,0 +1,8 @@
+import { createPluginCtx } from '#/core/context';
+
+export interface IFxContext {
+  versionHash: string;
+  deviceId: string;
+}
+
+export const FxContext = createPluginCtx<IFxContext>();

package/src/plugins/fx/index.ts

@@ -0,0 +1,26 @@
+import { BBPlugin } from '#/core/bbplugin';
+import { IHostContext } from '#/types/hostApi';
+import { PluginID } from '#/types/plugin';
+
+import { FxCom } from './components';
+import { FxContext } from './context';
+
+class FxPlugin extends BBPlugin {
+  id: PluginID = 'fx';
+
+  override onInstall = async (ctx: IHostContext) => {
+    ctx.api.registerSlot(
+      'pageFooter',
+      FxContext.withCtx(
+        {
+          versionHash: await ctx.api.getVersionHash(),
+          deviceId: (await ctx.api.getDeviceId()).id,
+        },
+        FxCom
+      ),
+      this.id
+    );
+  };
+}
+
+export default new FxPlugin();

package/src/plugins/manifest.ts

@@ -27,6 +27,13 @@ export const PLUGIN_MANIFEST: Array<IPluginManifestEntry> = [
     description:
       '提供额外的快速切换页面的捷径，例如在标题列表末尾添加一个 "cd ~" 的选项，点击后跳转到主页',
   },
+  {
+    name: '特效',
+    id: 'fx',
+    version: '0.1.0',
+    description:
+      '提供一些额外的视觉效果。此外，页面左下角会显示当前版本的哈希值和设备标识哈希水印。',
+  },
   // {
   //   name: 'extra-entry',
   //   id: 'extra-entry',

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Button, Table } from '@bbki.ng/ui';
 
 import { IComPropsRegisteredToSlot } from '#/types/slots';
@@ -6,45 +6,160 @@ import { IPluginStoreEntry, PluginID } from '#/types/plugin';
 
 import { StoreCtx } from '../context';
 
+// 空状态展示
+const EmptyState = () => (
+  <div className="flex flex-col items-center justify-center p-8 text-content-secondary">
+    <p className="text-sm">暂无可用插件</p>
+  </div>
+);
+
+// 错误状态展示
+const ErrorState = ({ error, onRetry }: { error: Error; onRetry: () => void }) => (
+  <div className="flex flex-col items-center justify-center p-8">
+    <p className="text-content-danger text-sm mb-4">加载失败: {error.message}</p>
+    <Button onClick={onRetry} size="sm">
+      重试
+    </Button>
+  </div>
+);
+
 export const StorePage = (_: IComPropsRegisteredToSlot) => {
   const { list, setLoading, isInstalled, install, uninstall } = StoreCtx.useCtx();
-  const [plugins, setPlugins] = React.useState<Array<IPluginStoreEntry>>([]);
+  const [plugins, setPlugins] = useState<Array<IPluginStoreEntry>>([]);
+  const [error, setError] = useState<Error | null>(null);
 
   useEffect(() => {
+    let cancelled = false;
+
     const fetchPlugins = async () => {
       setLoading(true);
-      const pluginList = await list();
-      setPlugins(pluginList);
-      setLoading(false);
+      setError(null);
+
+      try {
+        const pluginList = await list();
+        if (!cancelled) {
+          setPlugins(pluginList);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err : new Error('获取插件列表失败'));
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
     };
 
     fetchPlugins();
+
+    return () => {
+      cancelled = true;
+    };
   }, [list, setLoading]);
 
+  const refreshList = useCallback(async () => {
+    try {
+      const pluginList = await list();
+      setPlugins(pluginList);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('刷新列表失败'));
+    }
+  }, [list]);
+
   const handleInstall = useCallback(
     async (id: PluginID) => {
       setLoading(true);
-      await install(id);
-      const pluginList = await list();
-      setPlugins(pluginList);
-      setLoading(false);
+      setError(null);
+
+      try {
+        await install(id);
+        await refreshList();
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error('安装失败'));
+      } finally {
+        setLoading(false);
+      }
     },
-    [install, list, setLoading]
+    [install, refreshList, setLoading]
   );
 
   const handleUninstall = useCallback(
     async (id: PluginID) => {
       setLoading(true);
-      await uninstall(id);
-      const pluginList = await list();
-      setPlugins(pluginList);
-      setLoading(false);
+      setError(null);
+
+      try {
+        await uninstall(id);
+        await refreshList();
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error('卸载失败'));
+      } finally {
+        setLoading(false);
+      }
+    },
+    [uninstall, refreshList, setLoading]
+  );
+
+  const headerRenderer = useCallback(() => {
+    return (
+      <>
+        <Table.HCell>插件名称</Table.HCell>
+        <Table.HCell>插件描述</Table.HCell>
+        <Table.HCell style={{ textAlign: 'right' }}>安装/卸载</Table.HCell>
+      </>
+    );
+  }, []);
+
+  const rowRenderer = useCallback(
+    (index: number) => {
+      if (index < 0 || index >= plugins.length) {
+        return null;
+      }
+
+      const plugin = plugins[index];
+      const pluginInstalled = isInstalled(plugin.id);
+
+      return (
+        <>
+          <Table.Cell>{plugin.name}</Table.Cell>
+          <Table.Cell>{plugin.description}</Table.Cell>
+          <Table.Cell style={{ textAlign: 'right' }}>
+            {pluginInstalled ? (
+              <Button
+                variant="ghost"
+                className="text-content-danger"
+                onClick={() => handleUninstall(plugin.id)}
+              >
+                卸载
+              </Button>
+            ) : (
+              <Button color="primary" onClick={() => handleInstall(plugin.id)}>
+                安装
+              </Button>
+            )}
+          </Table.Cell>
+        </>
+      );
     },
-    [uninstall, list, setLoading]
+    [plugins, isInstalled, handleInstall, handleUninstall]
   );
 
+  if (error) {
+    return (
+      <div className="prose">
+        <ErrorState error={error} onRetry={refreshList} />
+      </div>
+    );
+  }
+
   if (plugins.length === 0) {
-    return null;
+    return (
+      <div className="prose">
+        <EmptyState />
+      </div>
+    );
   }
 
   return (
@@ -52,50 +167,8 @@ export const StorePage = (_: IComPropsRegisteredToSlot) => {
       <Table
         className="w-full"
         rowCount={plugins.length}
-        headerRenderer={() => {
-          return (
-            <>
-              <Table.HCell>插件名称</Table.HCell>
-              <Table.HCell>插件描述</Table.HCell>
-              <Table.HCell style={{ textAlign: 'right' }}>安装/卸载</Table.HCell>
-            </>
-          );
-        }}
-        rowRenderer={index => {
-          const isIdxValid = index >= 0 && index < plugins.length;
-          if (!isIdxValid) {
-            return null;
-          }
-          const plugin = plugins[index];
-          return (
-            <>
-              <Table.Cell>{plugin.name}</Table.Cell>
-              <Table.Cell>{plugin.description}</Table.Cell>
-              <Table.Cell style={{ textAlign: 'right' }}>
-                {isInstalled(plugin.id) ? (
-                  <Button
-                    variant="ghost"
-                    className="text-content-danger"
-                    onClick={() => {
-                      handleUninstall(plugin.id);
-                    }}
-                  >
-                    卸载
-                  </Button>
-                ) : (
-                  <Button
-                    color="primary"
-                    onClick={() => {
-                      handleInstall(plugin.id);
-                    }}
-                  >
-                    安装
-                  </Button>
-                )}
-              </Table.Cell>
-            </>
-          );
-        }}
+        headerRenderer={headerRenderer}
+        rowRenderer={rowRenderer}
       />
     </div>
   );

package/src/types/hostApi.ts

@@ -8,6 +8,7 @@ import { PluginID } from './plugin';
 
 export interface IHostApi {
   getDeviceId: () => Promise<{ id: string; fp: FingerprintData }>;
+  getVersionHash: () => Promise<string> | string;
   setLoading: (id: PluginID, loading: boolean) => void;
   registerMiddleware: <T>(
     point: HookPoint,

package/src/types/plugin.ts

@@ -13,7 +13,15 @@ export interface IPlugin {
   onDestroy?: () => void;
 }
 
-export type PluginID = 'sticker' | 'xwy' | 'extra-cd' | 'extra-entry' | 'store' | 'now' | 'default';
+export type PluginID =
+  | 'sticker'
+  | 'xwy'
+  | 'extra-cd'
+  | 'extra-entry'
+  | 'store'
+  | 'now'
+  | 'default'
+  | 'fx';
 
 export interface IPluginEntry {
   path: string;

package/src/types/slots.ts

@@ -4,6 +4,7 @@ export type SlotName =
   | 'articleActionRow'
   | 'logo'
   | 'route'
+  | 'pageFooter'
   | 'articleTitle';
 
 export type HookPoint =

package/src/blog/components/effect-layer/EffectContextProvider.tsx

@@ -1,27 +0,0 @@
-import React, { ReactNode, useContext, useMemo } from 'react';
-import { EffectLayer, grain, paper, spiral, watermark, Effect } from '@bbki.ng/ui';
-
-import { GlobalLoadingContext } from '@/context/global_loading_state_provider';
-import { useFingerprint } from '@/hooks/use_fingerprint';
-
-const hashStr: string = typeof GLOBAL_COMMIT_HASH === 'string' ? GLOBAL_COMMIT_HASH : '0000000';
-
-export const EffectContextProvider = (props: { children: ReactNode }) => {
-  const { isLoading } = useContext(GlobalLoadingContext);
-  const { deviceId } = useFingerprint();
-
-  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]);
-
-  return (
-    <>
-      <EffectLayer effects={effects} />
-      {props.children}
-    </>
-  );
-};

package/src/blog/hooks/use_fingerprint.ts

@@ -1,55 +0,0 @@
-import { useEffect, useState, useCallback } from 'react';
-import { getStableDeviceId, FingerprintData } from '@/utils/fingerprints';
-
-interface UseFingerprintReturn {
-  deviceId: string | null;
-  fingerprint: FingerprintData | null;
-  loading: boolean;
-  error: Error | null;
-  refresh: () => Promise<void>;
-}
-
-export function useFingerprint(): UseFingerprintReturn {
-  const [state, setState] = useState<{
-    deviceId: string | null;
-    fingerprint: FingerprintData | null;
-    loading: boolean;
-    error: Error | null;
-  }>({
-    deviceId: null,
-    fingerprint: null,
-    loading: true,
-    error: null,
-  });
-
-  const refresh = useCallback(async () => {
-    setState(prev => ({ ...prev, loading: true, error: null }));
-    try {
-      const { id, fp } = await getStableDeviceId();
-      setState({
-        deviceId: id,
-        fingerprint: fp,
-        loading: false,
-        error: null,
-      });
-    } catch (err) {
-      setState(prev => ({
-        ...prev,
-        loading: false,
-        error: err instanceof Error ? err : new Error('Failed to get fingerprint'),
-      }));
-    }
-  }, []);
-
-  useEffect(() => {
-    refresh();
-  }, [refresh]);
-
-  return {
-    deviceId: state.deviceId,
-    fingerprint: state.fingerprint,
-    loading: state.loading,
-    error: state.error,
-    refresh,
-  };
-}