UI Components

/**
 * Main UI API class for plugin UI development
 */
class IApiClass {
  constructor(service: IService);
  service: IService;
  
  // Core utilities
  event: IEvent;
  readonly hooks: Hooks;
  readonly request: any;
  readonly _: ILodash;
  readonly debug: IDebug;
  readonly mini: boolean;
  readonly bigfish: boolean;
  readonly _analyze: IAnalyze;
  
  // Project management
  currentProject: ICurrentProject;
  getLocale: IGetLocale;
  getCwd: IGetCwd;
  isMini(): boolean;
  
  // Internationalization
  intl: IIntl;
  
  // UI management
  addPanel: IAddPanel;
  addDashboard: IAddDashboard;
  registerModel: IRegisterModel;
  addLocales: IAddLocales;
  getContext(): Context<IContext>;
  getBasicUI: IGetBasicUI;
  
  // Notifications and navigation
  notify: INotify;
  redirect: IRedirect;
  
  // Utilities
  moment: IMoment;
  callRemote: ICallRemote;
  
  // UI Components
  TwoColumnPanel: FC<ITwoColumnPanel>;
  Terminal: FC<ITerminalProps>;
  DirectoryForm: FC<IDirectoryForm>;
  StepForm: IStepForm;
  ConfigForm: FC<IConfigFormProps>;
  Field: FC<IFieldProps>;
  
  // Remote communication
  listenRemote: IListenRemote;
  launchEditor: ILaunchEditor;
  
  // Panel management
  showLogPanel: IShowLogPanel;
  hideLogPanel: IHideLogPanel;
  setActionPanel: ISetActionPanel;
  showMini: IShowMini;
  hideMini: IHideMini;
  send: ISend;
  connect: IConnect;
  
  // Dashboard management
  getDashboard: IGetDashboard;
  getSharedDataDir: IGetSharedDataDir;
  getSearchParams: IGetSearchParams;
  detectLanguage: IDetectLanguage;
  detectNpmClients: () => Promise<string[]>;
  modifyBasicUI: IModifyBasicUI;
}

type IApi = InstanceType<typeof IApiClass>;

import { IUi } from 'umi-types';

// Plugin UI development
export default (api: IUi.IApi) => {
  // Add a dashboard card
  api.addDashboard({
    key: 'my-plugin-dashboard',
    title: 'My Plugin',
    description: 'Custom plugin dashboard',
    icon: <MyIcon />,
    content: <MyDashboardContent />,
  });

  // Add a panel
  api.addPanel({
    path: '/my-plugin',
    component: MyPluginPanel,
    icon: 'setting',
    title: 'My Plugin Settings',
  });

  // Add locales
  api.addLocales({
    'zh-CN': {
      'my.plugin.title': '我的插件',
    },
    'en-US': {
      'my.plugin.title': 'My Plugin',
    },
  });

  // Show notifications
  api.notify({
    title: 'Success',
    message: 'Operation completed successfully',
    type: 'success',
  });
};

/**
 * Panel configuration interface extending route configuration
 */
interface IPanel extends IRoute {
  path: string;
  component: FunctionComponent | ComponentClass;
  icon: IconType | string;
  actions?: IPanelAction;
  beta?: boolean;
  headerTitle?: ReactNode;
  renderTitle?: (title: string) => ReactNode;
}

/**
 * Icon type configuration
 */
interface IconType {
  type: string;
  theme?: 'filled' | 'outlined' | 'twoTone';
  rotate?: number;
  twoToneColor?: string;
}

/**
 * Panel action configuration
 */
interface IPanelConfigAction {
  title: string;
  type?: 'default' | 'primary';
  action?: IAction;
  onClick?: () => void;
}

type IPanelAction = (IPanelConfigAction | ReactNode | FC)[];

import { IPanel, IUi } from 'umi-types';

const MyPanel: IPanel = {
  path: '/settings',
  component: SettingsPanel,
  icon: 'setting',
  title: 'Settings',
  actions: [
    {
      title: 'Save',
      type: 'primary',
      onClick: () => {
        // Save logic
      },
    },
    {
      title: 'Reset',
      type: 'default',
      onClick: () => {
        // Reset logic
      },
    },
  ],
};

// With custom icon
const PanelWithCustomIcon: IPanel = {
  path: '/custom',
  component: CustomPanel,
  icon: {
    type: 'star',
    theme: 'filled',
    twoToneColor: '#eb2f96',
  },
  title: 'Custom Panel',
  beta: true,
  renderTitle: (title) => <span style={{ color: 'blue' }}>{title}</span>,
};

/**
 * Dashboard card configuration interface
 */
interface IDashboard {
  key: string;
  enable?: boolean;
  title: ReactNode;
  description: ReactNode;
  icon: ReactNode;
  right?: ReactNode;
  colClassName?: string;
  backgroundColor?: string;
  content: ReactNode | ReactNode[];
}

import { IDashboard } from 'umi-types';

const myDashboard: IDashboard = {
  key: 'build-status',
  title: 'Build Status',
  description: 'Current build information and statistics',
  icon: <BuildIcon />,
  backgroundColor: '#52c41a',
  right: <RefreshButton />,
  content: (
    <div>
      <p>Last build: Success</p>
      <p>Duration: 2m 30s</p>
      <p>Files: 156</p>
    </div>
  ),
};

// Multiple content sections
const multiContentDashboard: IDashboard = {
  key: 'project-overview',
  title: 'Project Overview',
  description: 'Quick project statistics and links',
  icon: <ProjectIcon />,
  content: [
    <ProjectStats key="stats" />,
    <QuickActions key="actions" />,
    <RecentActivity key="activity" />,
  ],
};

/**
 * Two-column panel layout component
 */
interface ITwoColumnPanel {
  className?: string;
  sections: Array<{
    key?: string;
    title: string;
    icon: string | ReactNode;
    description: string;
    component: FunctionComponent<any>;
  }>;
  disableLeftOverflow?: boolean;
  disableRightOverflow?: boolean;
}

/**
 * Terminal component properties
 */
interface ITerminalProps {
  title?: ReactNode;
  className?: string;
  terminalClassName?: string;
  defaultValue?: string;
  onInit?: (ins: XTerminal, fitAddon: any) => void;
  config?: ITerminalOptions;
  onResize?: (ins: XTerminal) => void;
  [key: string]: any;
}

/**
 * Directory form component
 */
interface IDirectoryForm {
  value?: string;
  onChange?: (value: string) => void;
}

/**
 * Step form component properties
 */
interface IStepFormProps {
  onFinish: (values: object) => void;
  className?: string;
  children: ReactElement<IStepItemForm>[];
}

interface IStepItemForm {
  currentStep: number;
  handleFinish: () => void;
  goNext: () => void;
  goPrev: () => void;
  index: number;
  active: boolean;
  [key: string]: any;
}

interface IStepItemProps {
  children: ReactElement<Partial<IStepItemForm>>;
  [key: string]: any;
}

type IStepForm = FC<IStepFormProps> & {
  StepItem: FC<IStepItemProps>;
};

/**
 * Configuration form component
 */
interface IConfigFormProps {
  title: string;
  list: string;
  edit: string;
  enableToc?: boolean;
  fuseOpts?: FuseOptions<number>;
}

/**
 * Form field component properties
 */
interface IFieldProps {
  type: IConfigTypes;
  name: string;
  defaultValue?: IValue;
  options?: string[];
  form: object;
  label: string | ReactNode | IFieldLabel;
  size?: 'default' | 'small' | 'large';
  [key: string]: any;
}

interface IFieldLabel {
  title: string;
  description: string;
  link: string;
}

type IValue = string | object | boolean | string[] | object[];
type IConfigTypes = keyof typeof CONFIG_TYPES;

import { IUi } from 'umi-types';

// Using TwoColumnPanel
const MyTwoColumnPanel = () => {
  return (
    <IUi.TwoColumnPanel
      sections={[
        {
          key: 'general',
          title: 'General Settings',
          icon: 'setting',
          description: 'Basic configuration options',
          component: GeneralSettings,
        },
        {
          key: 'advanced',
          title: 'Advanced Settings',
          icon: 'tool',
          description: 'Advanced configuration options',
          component: AdvancedSettings,
        },
      ]}
    />
  );
};

// Using Terminal
const MyTerminal = () => {
  return (
    <IUi.Terminal
      title="Build Output"
      defaultValue="$ npm run build\n"
      onInit={(terminal, fitAddon) => {
        terminal.writeln('Build started...');
      }}
      config={{
        cursorBlink: true,
        fontSize: 14,
      }}
    />
  );
};

// Using StepForm
const MyStepForm = () => {
  return (
    <IUi.StepForm onFinish={(values) => console.log(values)}>
      <IUi.StepForm.StepItem>
        {({ goNext, currentStep }) => (
          <div>
            <h3>Step 1: Basic Information</h3>
            <button onClick={goNext}>Next</button>
          </div>
        )}
      </IUi.StepForm.StepItem>
      <IUi.StepForm.StepItem>
        {({ goPrev, handleFinish }) => (
          <div>
            <h3>Step 2: Configuration</h3>
            <button onClick={goPrev}>Previous</button>
            <button onClick={handleFinish}>Finish</button>
          </div>
        )}
      </IUi.StepForm.StepItem>
    </IUi.StepForm>
  );
};

/**
 * UI service configuration interface
 */
interface IService {
  panels: IPanel[];
  locales: ILocale[];
  configSections: any[];
  basicUI: Partial<IBasicUI>;
  dashboard: IDashboard[];
}

/**
 * Basic UI configuration interface
 */
interface IBasicUI {
  name: string;
  logo: ReactNode;
  logo_remote: string;
  feedback: {
    src: string;
    width: number;
    height: number;
  };
  'create.project.button': ReactNode;
  helpDoc: string;
  'project.pages': {
    create: ReactNode;
  };
  dashboard: {
    siderFooter: ReactNode;
  };
}

/**
 * UI context interface
 */
interface IContext {
  theme: ITheme;
  locale: ILang;
  currentProject?: ICurrentProject;
  formatMessage: typeof intl.formatMessage;
  FormattedMessage: typeof intl.FormattedMessage;
  setLocale: typeof intl.setLocale;
  setTheme: (theme: ITheme) => void;
  showLogPanel: IShowLogPanel;
  hideLogPanel: IHideLogPanel;
  isMini: boolean;
  basicUI: IBasicUI;
  service: IService;
}

/**
 * Current project information interface
 */
interface ICurrentProject {
  key?: string;
  name?: string;
  path?: string;
  created_at?: number;
  opened_at?: number;
  npmClient?: string;
  taobaoSpeedUp?: boolean;
}

/**
 * Supported locale options
 */
enum LOCALES {
  'zh-CN' = '中文',
  'en-US' = 'English',
}

/**
 * Available theme options
 */
enum THEME {
  'dark' = 'dark',
  'light' = 'light',
}

/**
 * Configuration field types
 */
enum CONFIG_TYPES {
  'string' = 'string',
  'string[]' = 'string[]',
  'boolean' = 'boolean',
  'object' = 'object',
  'object[]' = 'object[]',
  'list' = 'list',
  'textarea' = 'textarea',
  'any' = 'any',
}

type ILang = keyof typeof LOCALES;
type ITheme = keyof typeof THEME;
type Locale = { [key in string]: string };
type ILocale = { [x in ILang]: Locale };

/**
 * Notification parameters interface
 */
interface INotifyParams {
  title: string;
  message: string;
  subtitle?: string;
  open?: string;
  timeout?: number;
  type?: 'error' | 'info' | 'warning' | 'success';
}

/**
 * Notification function type
 */
type INotify = (params: INotifyParams) => void | boolean;

import { INotify, INotifyParams } from 'umi-types';

// Success notification
const successNotification: INotifyParams = {
  title: 'Build Complete',
  message: 'Your project has been built successfully',
  type: 'success',
  timeout: 3000,
};

// Error notification with link
const errorNotification: INotifyParams = {
  title: 'Build Failed',
  message: 'There were errors during the build process',
  subtitle: 'Click to view details',
  type: 'error',
  open: '/logs',
};

// Using in plugin
export default (api: IUi.IApi) => {
  api.notify(successNotification);
};