fix: improve plugin settings code (#3028)

packages/core/client/src/application/PluginSettingsManager.ts

@@ -34,7 +34,9 @@ export interface PluginSettingsPageType {
   path: string;
   sort?: number;
   name?: string;
-  pluginName?: string;
+  isAllow?: boolean;
+  topLevelName?: string;
+  aclSnippet: string;
   children?: PluginSettingsPageType[];
   [index: string]: any;
 }
@@ -66,8 +68,8 @@ export class PluginSettingsManager {
 
   add(name: string, options: PluginSettingsManagerSettingOptionsType) {
     const nameArr = name.split('.');
-    const pluginName = nameArr[0];
-    this.settings[name] = { Component: Outlet, ...options, name, pluginName };
+    const topLevelName = nameArr[0];
+    this.settings[name] = { Component: Outlet, ...options, name, topLevelName };
 
     // add children
     if (nameArr.length > 1) {
@@ -129,8 +131,7 @@ export class PluginSettingsManager {
   }
 
   getList(filterAuth = true): PluginSettingsPageType[] {
-    return Object.keys(this.settings)
-      .filter((item) => !item.includes('.')) // top level
+    return Array.from(new Set(Object.values(this.settings).map((item) => item.topLevelName)))
       .sort((a, b) => a.localeCompare(b)) // sort by name
       .map((name) => this.get(name, filterAuth))
       .filter(Boolean)

packages/core/client/src/pm/PluginManagerLink.tsx

@@ -35,7 +35,6 @@ export const SettingsCenterDropdown = () => {
   const app = useApp();
   const settings = app.pluginSettingsManager.getList();
   const [open, setOpen] = useState(false);
-
   return (
     <ActionContextProvider value={{ visible, setVisible }}>
       <Popover
@@ -64,7 +63,7 @@ export const SettingsCenterDropdown = () => {
                       background: rgba(0, 0, 0, 0.045);
                     }
                   `}
-                  key={setting.pluginName}
+                  key={setting.name}
                 >
                   <a
                     role="button"

packages/core/client/src/pm/PluginSetting.tsx

@@ -69,22 +69,20 @@ export const SettingsCenterComponent = () => {
   }, [settings]);
 
   const currentSetting = useMemo(() => settingsMapByPath[location.pathname], [location.pathname, settingsMapByPath]);
-  const currentPlugin = useMemo(() => {
+  const currentTopLevelSetting = useMemo(() => {
     if (!currentSetting) {
       return null;
     }
-    return settings.find((item) => item.name === currentSetting.pluginName);
+    return settings.find((item) => item.name === currentSetting.topLevelName);
   }, [currentSetting, settings]);
-
   const sidebarMenus = useMemo(() => {
     return getMenuItems(settings.map((item) => ({ ...item, children: null })));
   }, [settings]);
-
   if (!currentSetting || location.pathname === ADMIN_SETTINGS_PATH || location.pathname === ADMIN_SETTINGS_PATH + '/') {
     return <Navigate replace to={getFirstDeepChildPath(settings)} />;
   }
-  if (location.pathname === currentPlugin.path && currentPlugin.children?.length > 0) {
-    return <Navigate replace to={getFirstDeepChildPath(currentPlugin.children)} />;
+  if (location.pathname === currentTopLevelSetting.path && currentTopLevelSetting.children?.length > 0) {
+    return <Navigate replace to={getFirstDeepChildPath(currentTopLevelSetting.children)} />;
   }
   return (
     <div>
@@ -106,7 +104,7 @@ export const SettingsCenterComponent = () => {
           theme={'light'}
         >
           <Menu
-            selectedKeys={[currentSetting?.pluginName]}
+            selectedKeys={[currentSetting?.topLevelName]}
             style={{ height: 'calc(100vh - 46px)', overflowY: 'auto', overflowX: 'hidden' }}
             onClick={({ key }) => {
               const plugin = settings.find((item) => item.name === key);
@@ -124,12 +122,12 @@ export const SettingsCenterComponent = () => {
             <PageHeader
               className={styles.pageHeader}
               style={{
-                paddingBottom: currentPlugin.children?.length > 0 ? 0 : theme.paddingSM,
+                paddingBottom: currentTopLevelSetting.children?.length > 0 ? 0 : theme.paddingSM,
               }}
               ghost={false}
-              title={currentPlugin.title}
+              title={currentTopLevelSetting.title}
               footer={
-                currentPlugin.children?.length > 0 && (
+                currentTopLevelSetting.children?.length > 0 && (
                   <Menu
                     style={{ marginLeft: -theme.margin }}
                     onClick={({ key }) => {
@@ -137,7 +135,7 @@ export const SettingsCenterComponent = () => {
                     }}
                     selectedKeys={[currentSetting?.name]}
                     mode="horizontal"
-                    items={getMenuItems(currentPlugin.children)}
+                    items={getMenuItems(currentTopLevelSetting.children)}
                   ></Menu>
                 )
               }