@bbki.ng/site 5.6.0 → 5.6.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @bbki.ng/site
 
+## 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.1",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "type": "module",

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>
   );