erp/apps/web/src/pages/PluginTabsPage.tsx

import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { Tabs, Spin, message } from 'antd';
import { getPluginSchema, type PluginPageSchema, type PluginSchemaResponse } from '../api/plugins';
import PluginCRUDPage from './PluginCRUDPage';
import { PluginTreePage } from './PluginTreePage';

/**
 * 插件 Tabs 页面 — 通过路由参数自加载 schema
 * 路由: /plugins/:pluginId/tabs/:pageLabel
 */
export function PluginTabsPage() {
  const { pluginId, pageLabel } = useParams<{ pluginId: string; pageLabel: string }>();
  const [loading, setLoading] = useState(true);
  const [tabs, setTabs] = useState<PluginPageSchema[]>([]);
  const [activeKey, setActiveKey] = useState('');

  useEffect(() => {
    if (!pluginId || !pageLabel) return;
    const abortController = new AbortController();

    async function loadSchema() {
      try {
        const schema: PluginSchemaResponse = await getPluginSchema(pluginId!);
        const pages = schema.ui?.pages || [];
        const tabsPage = pages.find(
          (p): p is PluginPageSchema & { type: 'tabs' } =>
            p.type === 'tabs' && p.label === pageLabel,
        );
        if (tabsPage && 'tabs' in tabsPage) {
          setTabs(tabsPage.tabs);
          const firstLabel = tabsPage.tabs.find((t) => 'label' in t)?.label || '';
          setActiveKey(firstLabel);
        }
      } catch {
        message.warning('Schema 加载失败，部分功能不可用');
      } finally {
        if (!abortController.signal.aborted) setLoading(false);
      }
    }

    loadSchema();
    return () => abortController.abort();
  }, [pluginId, pageLabel]);

  if (loading) {
    return <div style={{ padding: 24, textAlign: 'center' }}><Spin /></div>;
  }

  const renderTabContent = (tab: PluginPageSchema) => {
    if (tab.type === 'crud') {
      return (
        <PluginCRUDPage
          pluginIdOverride={pluginId}
          entityOverride={tab.entity}
          enableViews={tab.enable_views}
        />
      );
    }
    if (tab.type === 'tree') {
      return (
        <PluginTreePage
          pluginIdOverride={pluginId}
          entityOverride={tab.entity}
        />
      );
    }
    return <div>不支持的页面类型: {tab.type}</div>;
  };

  const items = tabs.map((tab) => ({
    key: 'label' in tab ? tab.label : '',
    label: 'label' in tab ? tab.label : '',
    children: renderTabContent(tab),
  }));

  return (
    <div style={{ padding: 24 }}>
      <Tabs activeKey={activeKey} onChange={setActiveKey} items={items} />
    </div>
  );
}