Group game operation sections

platform_web/pages/ServerDetailPage.tsx

@@ -166,19 +166,7 @@ export function ServerDetailPage(props: PageComponentProps) {
       )}
 
       {instance.status !== "ready" && (
-        <nav className="section-tabs" aria-label="server sections">
-          {detailSections.map((entry) => (
-            <button
-              key={entry.id}
-              type="button"
-              className={cx("section-tab", section === entry.id && "section-tab-active")}
-              aria-current={section === entry.id ? "page" : undefined}
-              onClick={() => setSection(entry.id)}
-            >
-              {entry.label}
-            </button>
-          ))}
-        </nav>
+        <ServerDetailSectionNav entries={detailSections} section={section} onChange={setSection} />
       )}
 
       {instance.status === "ready" && (
@@ -230,19 +218,7 @@ export function ServerDetailPage(props: PageComponentProps) {
             </div>
           </header>
 
-          <nav className="section-tabs" aria-label="server sections">
-            {detailSections.map((entry) => (
-              <button
-                key={entry.id}
-                type="button"
-                className={cx("section-tab", section === entry.id && "section-tab-active")}
-                aria-current={section === entry.id ? "page" : undefined}
-                onClick={() => setSection(entry.id)}
-              >
-                {entry.label}
-              </button>
-            ))}
-          </nav>
+          <ServerDetailSectionNav entries={detailSections} section={section} onChange={setSection} />
 
           {pluginPageKeyFromSection(section) && readyPlugin && <PluginPageSection pageProps={props} serverId={serverId} plugin={readyPlugin} routeKey={pluginPageKeyFromSection(section) ?? ""} />}
           {section === "manage" && <ServerDeploymentSection instance={instance.data} deployment={deployment} />}
@@ -289,6 +265,30 @@ function serverDetailSectionEntries(plugin?: GamePluginResponse): Array<{ id: Se
   return [...pluginPages, ...serverDetailSections];
 }
 
+function ServerDetailSectionNav({ entries, section, onChange }: { entries: Array<{ id: ServerDetailSection; label: string }>; section: ServerDetailSection; onChange: (section: ServerDetailSection) => void }) {
+  const pluginEntries = entries.filter((entry) => entry.id.startsWith("plugin:"));
+  const platformEntries = entries.filter((entry) => !entry.id.startsWith("plugin:"));
+  const activePluginSection = section.startsWith("plugin:") ? section : "";
+  return (
+    <nav className="section-tabs" aria-label="server sections">
+      {pluginEntries.length > 0 && (
+        <label className="server-plugin-section-picker">
+          <span>游戏运营</span>
+          <select aria-label="游戏运营功能" value={activePluginSection} onChange={(event) => event.target.value && onChange(event.target.value as ServerDetailSection)}>
+            <option value="" disabled>选择功能</option>
+            {pluginEntries.map((entry) => <option key={entry.id} value={entry.id}>{entry.label}</option>)}
+          </select>
+        </label>
+      )}
+      {platformEntries.map((entry) => (
+        <button key={entry.id} type="button" className={cx("section-tab", section === entry.id && "section-tab-active")} aria-current={section === entry.id ? "page" : undefined} onClick={() => onChange(entry.id)}>
+          {entry.label}
+        </button>
+      ))}
+    </nav>
+  );
+}
+
 function pluginPageKeyFromSection(section: ServerDetailSection): string | null {
   return section.startsWith("plugin:") ? section.slice("plugin:".length) : null;
 }