0
# UI Components
1

2
UI system types for Umi's plugin dashboard, panels, forms, and components. Used for developing Umi UI plugins and dashboard extensions.
3

4
## Capabilities
5

6
### UI API Interface
7

8
Main UI API class providing access to all UI development capabilities.
9

10
```typescript { .api }
11
/**
12
 * Main UI API class for plugin UI development
13
 */
14
class IApiClass {
15
  constructor(service: IService);
16
  service: IService;
17
  
18
  // Core utilities
19
  event: IEvent;
20
  readonly hooks: Hooks;
21
  readonly request: any;
22
  readonly _: ILodash;
23
  readonly debug: IDebug;
24
  readonly mini: boolean;
25
  readonly bigfish: boolean;
26
  readonly _analyze: IAnalyze;
27
  
28
  // Project management
29
  currentProject: ICurrentProject;
30
  getLocale: IGetLocale;
31
  getCwd: IGetCwd;
32
  isMini(): boolean;
33
  
34
  // Internationalization
35
  intl: IIntl;
36
  
37
  // UI management
38
  addPanel: IAddPanel;
39
  addDashboard: IAddDashboard;
40
  registerModel: IRegisterModel;
41
  addLocales: IAddLocales;
42
  getContext(): Context<IContext>;
43
  getBasicUI: IGetBasicUI;
44
  
45
  // Notifications and navigation
46
  notify: INotify;
47
  redirect: IRedirect;
48
  
49
  // Utilities
50
  moment: IMoment;
51
  callRemote: ICallRemote;
52
  
53
  // UI Components
54
  TwoColumnPanel: FC<ITwoColumnPanel>;
55
  Terminal: FC<ITerminalProps>;
56
  DirectoryForm: FC<IDirectoryForm>;
57
  StepForm: IStepForm;
58
  ConfigForm: FC<IConfigFormProps>;
59
  Field: FC<IFieldProps>;
60
  
61
  // Remote communication
62
  listenRemote: IListenRemote;
63
  launchEditor: ILaunchEditor;
64
  
65
  // Panel management
66
  showLogPanel: IShowLogPanel;
67
  hideLogPanel: IHideLogPanel;
68
  setActionPanel: ISetActionPanel;
69
  showMini: IShowMini;
70
  hideMini: IHideMini;
71
  send: ISend;
72
  connect: IConnect;
73
  
74
  // Dashboard management
75
  getDashboard: IGetDashboard;
76
  getSharedDataDir: IGetSharedDataDir;
77
  getSearchParams: IGetSearchParams;
78
  detectLanguage: IDetectLanguage;
79
  detectNpmClients: () => Promise<string[]>;
80
  modifyBasicUI: IModifyBasicUI;
81
}
82

83
type IApi = InstanceType<typeof IApiClass>;
84
```
85

86
**Usage Examples:**
87

88
```typescript
89
import { IUi } from 'umi-types';
90

91
// Plugin UI development
92
export default (api: IUi.IApi) => {
93
  // Add a dashboard card
94
  api.addDashboard({
95
    key: 'my-plugin-dashboard',
96
    title: 'My Plugin',
97
    description: 'Custom plugin dashboard',
98
    icon: <MyIcon />,
99
    content: <MyDashboardContent />,
100
  });
101

102
  // Add a panel
103
  api.addPanel({
104
    path: '/my-plugin',
105
    component: MyPluginPanel,
106
    icon: 'setting',
107
    title: 'My Plugin Settings',
108
  });
109

110
  // Add locales
111
  api.addLocales({
112
    'zh-CN': {
113
      'my.plugin.title': '我的插件',
114
    },
115
    'en-US': {
116
      'my.plugin.title': 'My Plugin',
117
    },
118
  });
119

120
  // Show notifications
121
  api.notify({
122
    title: 'Success',
123
    message: 'Operation completed successfully',
124
    type: 'success',
125
  });
126
};
127
```
128

129
### Panel Configuration
130

131
Panel definition for creating UI plugin panels.
132

133
```typescript { .api }
134
/**
135
 * Panel configuration interface extending route configuration
136
 */
137
interface IPanel extends IRoute {
138
  path: string;
139
  component: FunctionComponent | ComponentClass;
140
  icon: IconType | string;
141
  actions?: IPanelAction;
142
  beta?: boolean;
143
  headerTitle?: ReactNode;
144
  renderTitle?: (title: string) => ReactNode;
145
}
146

147
/**
148
 * Icon type configuration
149
 */
150
interface IconType {
151
  type: string;
152
  theme?: 'filled' | 'outlined' | 'twoTone';
153
  rotate?: number;
154
  twoToneColor?: string;
155
}
156

157
/**
158
 * Panel action configuration
159
 */
160
interface IPanelConfigAction {
161
  title: string;
162
  type?: 'default' | 'primary';
163
  action?: IAction;
164
  onClick?: () => void;
165
}
166

167
type IPanelAction = (IPanelConfigAction | ReactNode | FC)[];
168
```
169

170
**Usage Examples:**
171

172
```typescript
173
import { IPanel, IUi } from 'umi-types';
174

175
const MyPanel: IPanel = {
176
  path: '/settings',
177
  component: SettingsPanel,
178
  icon: 'setting',
179
  title: 'Settings',
180
  actions: [
181
    {
182
      title: 'Save',
183
      type: 'primary',
184
      onClick: () => {
185
        // Save logic
186
      },
187
    },
188
    {
189
      title: 'Reset',
190
      type: 'default',
191
      onClick: () => {
192
        // Reset logic
193
      },
194
    },
195
  ],
196
};
197

198
// With custom icon
199
const PanelWithCustomIcon: IPanel = {
200
  path: '/custom',
201
  component: CustomPanel,
202
  icon: {
203
    type: 'star',
204
    theme: 'filled',
205
    twoToneColor: '#eb2f96',
206
  },
207
  title: 'Custom Panel',
208
  beta: true,
209
  renderTitle: (title) => <span style={{ color: 'blue' }}>{title}</span>,
210
};
211
```
212

213
### Dashboard Configuration
214

215
Dashboard card configuration for the main dashboard.
216

217
```typescript { .api }
218
/**
219
 * Dashboard card configuration interface
220
 */
221
interface IDashboard {
222
  key: string;
223
  enable?: boolean;
224
  title: ReactNode;
225
  description: ReactNode;
226
  icon: ReactNode;
227
  right?: ReactNode;
228
  colClassName?: string;
229
  backgroundColor?: string;
230
  content: ReactNode | ReactNode[];
231
}
232
```
233

234
**Usage Examples:**
235

236
```typescript
237
import { IDashboard } from 'umi-types';
238

239
const myDashboard: IDashboard = {
240
  key: 'build-status',
241
  title: 'Build Status',
242
  description: 'Current build information and statistics',
243
  icon: <BuildIcon />,
244
  backgroundColor: '#52c41a',
245
  right: <RefreshButton />,
246
  content: (
247
    <div>
248
      <p>Last build: Success</p>
249
      <p>Duration: 2m 30s</p>
250
      <p>Files: 156</p>
251
    </div>
252
  ),
253
};
254

255
// Multiple content sections
256
const multiContentDashboard: IDashboard = {
257
  key: 'project-overview',
258
  title: 'Project Overview',
259
  description: 'Quick project statistics and links',
260
  icon: <ProjectIcon />,
261
  content: [
262
    <ProjectStats key="stats" />,
263
    <QuickActions key="actions" />,
264
    <RecentActivity key="activity" />,
265
  ],
266
};
267
```
268

269
### UI Components
270

271
Built-in UI components for plugin development.
272

273
```typescript { .api }
274
/**
275
 * Two-column panel layout component
276
 */
277
interface ITwoColumnPanel {
278
  className?: string;
279
  sections: Array<{
280
    key?: string;
281
    title: string;
282
    icon: string | ReactNode;
283
    description: string;
284
    component: FunctionComponent<any>;
285
  }>;
286
  disableLeftOverflow?: boolean;
287
  disableRightOverflow?: boolean;
288
}
289

290
/**
291
 * Terminal component properties
292
 */
293
interface ITerminalProps {
294
  title?: ReactNode;
295
  className?: string;
296
  terminalClassName?: string;
297
  defaultValue?: string;
298
  onInit?: (ins: XTerminal, fitAddon: any) => void;
299
  config?: ITerminalOptions;
300
  onResize?: (ins: XTerminal) => void;
301
  [key: string]: any;
302
}
303

304
/**
305
 * Directory form component
306
 */
307
interface IDirectoryForm {
308
  value?: string;
309
  onChange?: (value: string) => void;
310
}
311

312
/**
313
 * Step form component properties
314
 */
315
interface IStepFormProps {
316
  onFinish: (values: object) => void;
317
  className?: string;
318
  children: ReactElement<IStepItemForm>[];
319
}
320

321
interface IStepItemForm {
322
  currentStep: number;
323
  handleFinish: () => void;
324
  goNext: () => void;
325
  goPrev: () => void;
326
  index: number;
327
  active: boolean;
328
  [key: string]: any;
329
}
330

331
interface IStepItemProps {
332
  children: ReactElement<Partial<IStepItemForm>>;
333
  [key: string]: any;
334
}
335

336
type IStepForm = FC<IStepFormProps> & {
337
  StepItem: FC<IStepItemProps>;
338
};
339

340
/**
341
 * Configuration form component
342
 */
343
interface IConfigFormProps {
344
  title: string;
345
  list: string;
346
  edit: string;
347
  enableToc?: boolean;
348
  fuseOpts?: FuseOptions<number>;
349
}
350

351
/**
352
 * Form field component properties
353
 */
354
interface IFieldProps {
355
  type: IConfigTypes;
356
  name: string;
357
  defaultValue?: IValue;
358
  options?: string[];
359
  form: object;
360
  label: string | ReactNode | IFieldLabel;
361
  size?: 'default' | 'small' | 'large';
362
  [key: string]: any;
363
}
364

365
interface IFieldLabel {
366
  title: string;
367
  description: string;
368
  link: string;
369
}
370

371
type IValue = string | object | boolean | string[] | object[];
372
type IConfigTypes = keyof typeof CONFIG_TYPES;
373
```
374

375
**Usage Examples:**
376

377
```typescript
378
import { IUi } from 'umi-types';
379

380
// Using TwoColumnPanel
381
const MyTwoColumnPanel = () => {
382
  return (
383
    <IUi.TwoColumnPanel
384
      sections={[
385
        {
386
          key: 'general',
387
          title: 'General Settings',
388
          icon: 'setting',
389
          description: 'Basic configuration options',
390
          component: GeneralSettings,
391
        },
392
        {
393
          key: 'advanced',
394
          title: 'Advanced Settings',
395
          icon: 'tool',
396
          description: 'Advanced configuration options',
397
          component: AdvancedSettings,
398
        },
399
      ]}
400
    />
401
  );
402
};
403

404
// Using Terminal
405
const MyTerminal = () => {
406
  return (
407
    <IUi.Terminal
408
      title="Build Output"
409
      defaultValue="$ npm run build\n"
410
      onInit={(terminal, fitAddon) => {
411
        terminal.writeln('Build started...');
412
      }}
413
      config={{
414
        cursorBlink: true,
415
        fontSize: 14,
416
      }}
417
    />
418
  );
419
};
420

421
// Using StepForm
422
const MyStepForm = () => {
423
  return (
424
    <IUi.StepForm onFinish={(values) => console.log(values)}>
425
      <IUi.StepForm.StepItem>
426
        {({ goNext, currentStep }) => (
427
          <div>
428
            <h3>Step 1: Basic Information</h3>
429
            <button onClick={goNext}>Next</button>
430
          </div>
431
        )}
432
      </IUi.StepForm.StepItem>
433
      <IUi.StepForm.StepItem>
434
        {({ goPrev, handleFinish }) => (
435
          <div>
436
            <h3>Step 2: Configuration</h3>
437
            <button onClick={goPrev}>Previous</button>
438
            <button onClick={handleFinish}>Finish</button>
439
          </div>
440
        )}
441
      </IUi.StepForm.StepItem>
442
    </IUi.StepForm>
443
  );
444
};
445
```
446

447
### Service Configuration
448

449
UI service configuration and context management.
450

451
```typescript { .api }
452
/**
453
 * UI service configuration interface
454
 */
455
interface IService {
456
  panels: IPanel[];
457
  locales: ILocale[];
458
  configSections: any[];
459
  basicUI: Partial<IBasicUI>;
460
  dashboard: IDashboard[];
461
}
462

463
/**
464
 * Basic UI configuration interface
465
 */
466
interface IBasicUI {
467
  name: string;
468
  logo: ReactNode;
469
  logo_remote: string;
470
  feedback: {
471
    src: string;
472
    width: number;
473
    height: number;
474
  };
475
  'create.project.button': ReactNode;
476
  helpDoc: string;
477
  'project.pages': {
478
    create: ReactNode;
479
  };
480
  dashboard: {
481
    siderFooter: ReactNode;
482
  };
483
}
484

485
/**
486
 * UI context interface
487
 */
488
interface IContext {
489
  theme: ITheme;
490
  locale: ILang;
491
  currentProject?: ICurrentProject;
492
  formatMessage: typeof intl.formatMessage;
493
  FormattedMessage: typeof intl.FormattedMessage;
494
  setLocale: typeof intl.setLocale;
495
  setTheme: (theme: ITheme) => void;
496
  showLogPanel: IShowLogPanel;
497
  hideLogPanel: IHideLogPanel;
498
  isMini: boolean;
499
  basicUI: IBasicUI;
500
  service: IService;
501
}
502

503
/**
504
 * Current project information interface
505
 */
506
interface ICurrentProject {
507
  key?: string;
508
  name?: string;
509
  path?: string;
510
  created_at?: number;
511
  opened_at?: number;
512
  npmClient?: string;
513
  taobaoSpeedUp?: boolean;
514
}
515
```
516

517
### Enums and Constants
518

519
UI-related enums and constant definitions.
520

521
```typescript { .api }
522
/**
523
 * Supported locale options
524
 */
525
enum LOCALES {
526
  'zh-CN' = '中文',
527
  'en-US' = 'English',
528
}
529

530
/**
531
 * Available theme options
532
 */
533
enum THEME {
534
  'dark' = 'dark',
535
  'light' = 'light',
536
}
537

538
/**
539
 * Configuration field types
540
 */
541
enum CONFIG_TYPES {
542
  'string' = 'string',
543
  'string[]' = 'string[]',
544
  'boolean' = 'boolean',
545
  'object' = 'object',
546
  'object[]' = 'object[]',
547
  'list' = 'list',
548
  'textarea' = 'textarea',
549
  'any' = 'any',
550
}
551

552
type ILang = keyof typeof LOCALES;
553
type ITheme = keyof typeof THEME;
554
type Locale = { [key in string]: string };
555
type ILocale = { [x in ILang]: Locale };
556
```
557

558
### Notification System
559

560
Notification and user feedback management.
561

562
```typescript { .api }
563
/**
564
 * Notification parameters interface
565
 */
566
interface INotifyParams {
567
  title: string;
568
  message: string;
569
  subtitle?: string;
570
  open?: string;
571
  timeout?: number;
572
  type?: 'error' | 'info' | 'warning' | 'success';
573
}
574

575
/**
576
 * Notification function type
577
 */
578
type INotify = (params: INotifyParams) => void | boolean;
579
```
580

581
**Usage Examples:**
582

583
```typescript
584
import { INotify, INotifyParams } from 'umi-types';
585

586
// Success notification
587
const successNotification: INotifyParams = {
588
  title: 'Build Complete',
589
  message: 'Your project has been built successfully',
590
  type: 'success',
591
  timeout: 3000,
592
};
593

594
// Error notification with link
595
const errorNotification: INotifyParams = {
596
  title: 'Build Failed',
597
  message: 'There were errors during the build process',
598
  subtitle: 'Click to view details',
599
  type: 'error',
600
  open: '/logs',
601
};
602

603
// Using in plugin
604
export default (api: IUi.IApi) => {
605
  api.notify(successNotification);
606
};
607
```