### Basic Application Layout Setup

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/README.md

Provides a basic example of setting up the application layout using Page, AppLayout, and ConsoleMenu components. Ensure necessary components are imported.

```typescript
import AppLayout from '@alicloud/console-components/rc-app-layout'
import ConsoleMenu from '@alicloud/console-components/rc-console-menu'
import Page from '@alicloud/console-components/rc-page'

export default function App() {
  return (
    <Page sceneryTheme="white">
      <AppLayout nav={<ConsoleMenu type="primary" />}>
        <Page.Content>
          {/* Application content */}
        </Page.Content>
      </AppLayout>
    </Page>
  )
}
```

--------------------------------

### Install Console Components Page

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/packages/rc-components/rc-page/README.md

Install the @alicloud/console-components-page package using tnpm.

```bash
tnpm i -S @alicloud/console-components-page
```

--------------------------------

### Basic Page with White Background

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/page.md

Example of a basic page setup with a white background theme. Ensure AppLayout, Nav, Page.Header, and Page.Content are imported and defined elsewhere.

```typescript
import Page from '@alicloud/console-components/rc-page'
import AppLayout from '@alicloud/console-components/rc-app-layout'

export function Dashboard() {
  return (
    <Page sceneryTheme="white">
      <AppLayout nav={<Nav />}>
        <Page.Header title="Dashboard" />
        <Page.Content>
          {/* Main content */}
        </Page.Content>
      </AppLayout>
    </Page>
  )
}
```

--------------------------------

### Configuration and Props Example

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/00-START-HERE.md

This comment block indicates where to find information about component configuration. The Props table lists all options, Configuration.md explains their values, and examples demonstrate real usage.

```typescript
// Props table shows all options
// Configuration.md explains values
// Examples show real usage
```

--------------------------------

### Theme System Import Example

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/README.md

Shows how to import theme definitions for components like AppLayout.

```typescript
import { WindTheme, XConsoleTheme } from '@alicloud/console-components/rc-app-layout'
```

--------------------------------

### Install Console Menu Component

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/packages/rc-components/rc-console-menu/README.md

Install the latest version of the console-menu component using npm.

```bash
npm i -S @alicloud/console-components-console-menu
```

--------------------------------

### Provider Pattern Example

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/README.md

Illustrates the provider pattern for passing configuration to nested components via context.

```typescript
<AppLayout nav={<Nav />}>
  <Content />
</AppLayout>
```

--------------------------------

### ThemeProvider Setup

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/css-var-utils.md

Illustrates setting up React's `ThemeProvider` with `CssVarTheme` values, enabling theme propagation through the component tree.

```typescript
const lightTheme = theme.values()
const darkTheme = theme.overwrite({
  primaryColor: '#1a73e8',
  backgroundColor: '#ffffff'
}).values()

<ThemeProvider theme={{ cssVars: theme.vars }}>
  <Application />
</ThemeProvider>
```

--------------------------------

### Info.Content Component Usage

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/info.md

Example of using the Info.Content sub-component to provide the main information content.

```typescript
<Info>
  <Info.Content>
    Information content goes here
  </Info.Content>
</Info>
```

--------------------------------

### Basic Table Example

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/table.md

Renders a simple data table with columns and data. Ensure columns and dataSource are properly defined.

```typescript
import Table from '@alicloud/console-components/rc-table'

function DataTable() {
  const columns = [
    { key: 'id', label: 'ID', width: 100 },
    { key: 'name', label: 'Name', width: 200 },
    { key: 'email', label: 'Email' },
    { key: 'status', label: 'Status' }
  ]

  const dataSource = [
    { id: 1, name: 'User A', email: 'a@example.com', status: 'Active' },
    { id: 2, name: 'User B', email: 'b@example.com', status: 'Inactive' }
  ]

  return (
    <Table columns={columns} dataSource={dataSource} />
  )
}
```

--------------------------------

### Setup FakeBrowser for Jest Tests

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/fake-browser.md

Globally expose FakeBrowser in Jest tests to make browser APIs available. This setup is usually done in a setup file.

```typescript
import { FakeBrowser } from '@alicloud/console-components-fake-browser'

beforeAll(() => {
  global.FakeBrowser = FakeBrowser
})

test('component renders correctly', () => {
  // Component code that depends on browser APIs
  const element = document.createElement('div')
  expect(element).toBeDefined()
})
```

--------------------------------

### Info.Title Component Usage

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/info.md

Example of using the Info.Title sub-component to set the title for the Info display.

```typescript
<Info>
  <Info.Title>Title Text</Info.Title>
</Info>
```

--------------------------------

### ConsoleMenu with Structured Items and React Router

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/packages/rc-components/rc-console-menu/README.md

Shows an alternative way to configure ConsoleMenu using a structured 'items' array, which achieves the same result as the previous example but with a more declarative approach.

```javascript
import ConsoleMenu from '@alicloud/console-components-console-menu'
import { Route, Link } from 'react-router-dom'

const mapLocationToActiveKey = (location) => {
  if (!location || !location.pathname || location.pathname === '/') {
    return 'overview'
  }

  return location.pathname.replace(/^\//, '')
}

const renderAsLink = ({ key, label }) => (
  <Link to={`/${key}`}>{label}</Link>
)

const items = [
  { key: 'overview', label: '概览', render: renderAsLink },
  { key: 'list', label: '列表', render: renderAsLink },
  {
    key: 'logs',
    label: '列表',
    items: [
      { key: 'daily', label: '日常', render: renderAsLink },
      { key: 'prod', label: '生产', render: renderAsLink, visible: false },
    ]
  },
]

const App = () => (
  <Route>
    {
      ({ location }) => (
        <ConsoleMenu
          header="Aliyun Console"
          items={items}
          activeKey={location.pathname}
        />
      )
    }
  </Route>
)
```

--------------------------------

### Vitest Configuration for FakeBrowser

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/fake-browser.md

Configure Vitest to enable global access to browser APIs and specify a setup file for FakeBrowser.

```typescript
// vitest.config.ts
import { FakeBrowser } from '@alicloud/console-components-fake-browser'

export default {
  test: {
    globals: true,
    setupFiles: ['./test-setup.ts']
  }
}
```

--------------------------------

### DOM Manipulation Example

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/fake-browser.md

Demonstrates basic DOM manipulation using FakeBrowser, including creating elements, setting text content, and appending to the body.

```typescript
const body = document.body
const div = document.createElement('div')
div.textContent = 'Hello'
body.appendChild(div)

expect(document.body.children.length).toBeGreaterThan(0)
```

--------------------------------

### Compound Components Pattern Example

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/README.md

Demonstrates the compound component pattern where sub-components are exposed as properties of a parent component.

```typescript
<Actions>
  <Actions.LinkButton>Edit</Actions.LinkButton>
  <Actions.LinkMore>More</Actions.LinkMore>
</Actions>
```

--------------------------------

### Testing Component Styling with FakeBrowser

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/fake-browser.md

Example of testing the rendered style of a component using FakeBrowser and a testing library. Assumes a `render` function and `toHaveStyle` matcher are available.

```typescript
test('styled component renders correctly', () => {
  const { container } = render(
    <StyledComponent prop="value" />
  )
  
  const element = container.querySelector('.component')
  expect(element).toHaveStyle('color: #0070cc')
})
```

--------------------------------

### Basic RcAnnouncement Example

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/announcement.md

Displays a basic announcement carousel with multiple items, a notice type, and a close button. Automatically limits to 3 items.

```typescript
import RcAnnouncement from '@alicloud/console-components/rc-announcement'

function Announcements() {
  const announcements = [
    { title: 'System Maintenance', content: 'Scheduled maintenance on 2024-01-15' },
    { title: 'New Feature Release', content: 'Check out our new dashboard features' },
    { title: 'Security Update', content: 'Important security patch released' }
  ]

  return (
    <RcAnnouncement
      dataSource={announcements}
      type="notice"
      closeable={true}
    />
  )
}
```

--------------------------------

### Jest Setup for FakeBrowser

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/fake-browser.md

Configure Jest to globally provide the FakeBrowser class, making browser APIs accessible in all test files.

```typescript
// jest.setup.js
import { FakeBrowser } from '@alicloud/console-components-fake-browser'

global.FakeBrowser = FakeBrowser

// Tests automatically have access to browser APIs
```

--------------------------------

### Page Breadcrumb Navigation Example

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/packages/rc-components/rc-page/README.md

Defines breadcrumb navigation within Page.Header using the Breadcrumb component, recommended for Page.Header.breadcrumb property.

```javascript
import Page from '@alicloud/console-components-page';
import { Link } from 'dva/router';

const { Breadcrumb, Header } = Page;

const breadcrumb = (
  <Breadcrumb>
    <Breadcrumb.Item key="home">
      <Link to="/home">首页</Link>
    </Breadcrumb.Item>
    <Breadcrumb.Item key="list">
      <Link to="/list">列表</Link>
    </Breadcrumb.Item>
    <Breadcrumb.Item key="detail">详情</Breadcrumb.Item>
  </Breadcrumb>
);

const Detail = () => (
  <Page>
    <Header breadcrumb={breadcrumb} title="详情" />
    <Page.Content>Page Content</Page.Content>
  </Page>
);
```

--------------------------------

### Render Table with Fixed Action Bar

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/configuration.md

Example of using the Table component with a fixed action bar at the top and specific z-index.

```typescript
<Table
  columns={columns}
  dataSource={data}
  affixActionBar="top"
  fixedBarZIndex={100}
  exact={true}
/>
```

--------------------------------

### RcAnnouncement with Different Message Types

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/announcement.md

Demonstrates the RcAnnouncement component with various message types: success, error, and info. Each example shows a different type indicator.

```typescript
// Success announcement
<RcAnnouncement
  dataSource={[{ title: 'Deployment successful' }]} 
  type="success"
/>

// Error announcement
<RcAnnouncement
  dataSource={[{ title: 'System error', content: 'Please refresh' }]} 
  type="error"
/>

// Info announcement
<RcAnnouncement
  dataSource={[{ title: 'FYI', content: 'Important information' }]} 
  type="info"
/>
```

--------------------------------

### Setting Up Fake Browser Environment in Tests

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/fake-browser.md

Demonstrates setting up and tearing down the FakeBrowser environment within a test suite using beforeEach and afterEach hooks.

```typescript
import { FakeBrowser } from '@alicloud/console-components-fake-browser'

describe('Component Tests', () => {
  beforeEach(() => {
    // Setup fake browser for each test
    const fb = new FakeBrowser()
  })

  afterEach(() => {
    // Cleanup
    document.body.innerHTML = ''
  })

  it('should work with DOM APIs', () => {
    const div = document.createElement('div')
    expect(div.tagName).toBe('DIV')
  })
})
```

--------------------------------

### Get Theme Values for CSS

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/css-var-utils.md

Retrieve a mapping of CSS variable names to their values from a CssVarTheme.

```typescript
// Get values for CSS
const values = theme.values()
// { primaryColor: '#0070cc', secondaryColor: '#999999', ... }
```

--------------------------------

### Configuration-Based Component Usage with Table

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/00-START-HERE.md

Illustrates how components like Table can be configured using data-driven properties such as columns, dataSource, and operation. This approach allows for flexible and dynamic data presentation.

```jsx
<Table
  columns={columnDefinitions}
  dataSource={data}
  operation={operationConfig}
/>
```

--------------------------------

### Basic Info Display

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/info.md

Demonstrates a basic usage of the Info component with a title and simple content.

```typescript
import Info from '@alicloud/console-components/rc-info'

function ResourceInfo() {
  return (
    <Info>
      <Info.Title>Resource Details</Info.Title>
      <Info.Content>
        This resource is currently active and healthy.
      </Info.Content>
    </Info>
  )
}
```

--------------------------------

### Consume CSS Variable for Styled Components

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/css-var-utils.md

Get a function compatible with styled-components to consume a CssVar's value.

```typescript
// Use in styled-components
const StyledButton = styled.button`
  color: ${(props) => primaryColor.consumeStyled(props)}
`
```

--------------------------------

### Consume CSS Variable Value

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/css-var-utils.md

Get the CSS value string for a CssVar, suitable for direct use in CSS.

```typescript
// Use in CSS
const color = primaryColor.consume // "var(--primary-color, #0070cc)"
```

--------------------------------

### Import ConsoleMenu Component

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/console-menu.md

Import the ConsoleMenu component from the @alicloud/console-components package.

```typescript
import ConsoleMenu from '@alicloud/console-components/rc-console-menu'
```

--------------------------------

### Configure AppLayout Component with Navigation

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/configuration.md

Set up the AppLayout component with navigation, enabling sidebar collapse functionality and defining the initial collapsed state and height adjustment.

```typescript
<AppLayout
  nav={navigation}
  navCollapsible={true}
  defaultNavCollapsed={false}
  adjustHeight={64}
>
  {children}
</AppLayout>
```

--------------------------------

### ConsoleMenu.Item Usage

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/console-menu.md

Demonstrates how to render a single menu item with its key, label, and disabled state.

```typescript
<ConsoleMenu.Item
  key="item-key"
  label="Item Label"
  disabled={false}
/>
```

--------------------------------

### Basic ConsoleMenu with React Router

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/packages/rc-components/rc-console-menu/README.md

Demonstrates how to use ConsoleMenu with react-router-dom by manually mapping location to activeKey. This approach separates menu behavior from routing logic.

```javascript
import ConsoleMenu from '@alicloud/console-components-console-menu'
import { Route, Link } from 'react-router-dom'

const mapLocationToActiveKey = (location) => {
  if (!location || !location.pathname || location.pathname === '/') {
    return 'overview'
  }

  return location.pathname.replace(/^\//, '')
}

const App = () => (
  <Route>
    {
      ({ location }) => (
        <ConsoleMenu
          header="Aliyun Console"
          activeKey={location.pathname}
        >
          <ConsoleMenu.Item key="overview">
            <Link to="/overview">概览</Link>
          </ConsoleMenu.Item>
          <ConsoleMenu.Item key="list">
            <Link to="/list">列表</Link>
          </ConsoleMenu.Item>
          <ConsoleMenu.SubMenu key="logs">
            <ConsoleMenu.Item key="daily">
              <Link to="/daily">日常</Link>
            </ConsoleMenu.Item>
            <ConsoleMenu.Item key="prod">
              <Link to="/prod">生产</Link>
            </ConsoleMenu.Item>
          </ConsoleMenu.SubMenu>
        </ConsoleMenu>
      )
    }
  </Route>
)
```

--------------------------------

### Basic Page Layout

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/packages/rc-components/rc-page/README.md

Demonstrates the fundamental usage of the Page component for basic page layout.

```javascript
import Page from '@alicloud/console-components-page';

const Basic = () => (
  <Page>
    <Page.Header title="Basic Page" />
    <Page.Content>Page Content</Page.Content>
  </Page>
);
```

--------------------------------

### Actions Component Basic Usage

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/actions.md

Demonstrates the basic usage of the Actions component with a default threshold of 3 items. Ensure Actions is imported from '@alicloud/console-components/rc-actions' and Button from '@alicloud/console-components'.

```typescript
import Actions from '@alicloud/console-components/rc-actions'
import { Button } from '@alicloud/console-components'

function ActionBar() {
  return (
    <Actions threshold={3}>
      <Button type="primary">Create</Button>
      <Button>Edit</Button>
      <Button>Delete</Button>
      <Button>Export</Button>
      <Button>Import</Button>
    </Actions>
  )
}
```

--------------------------------

### Compound Component Usage with ConsoleMenu

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/00-START-HERE.md

Demonstrates how to use sub-components within a parent component like ConsoleMenu. Ensure to refer to the specific component's documentation for detailed prop information.

```jsx
<ConsoleMenu>
  <ConsoleMenu.Item key="home" label="Home" />
  <ConsoleMenu.SubMenu key="settings" label="Settings">
    <ConsoleMenu.Item key="profile" label="Profile" />
  </ConsoleMenu.SubMenu>
</ConsoleMenu>
```

--------------------------------

### usePanelStack Hook Usage

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/slide-panel.md

Demonstrates how to use the usePanelStack hook to manage panel stack state, including adding and removing panels, and accessing the current panels.

```typescript
const { push, pop, panels } = usePanelStack()

// Add panel
push({ id: 'panel-id', title: 'Title', content: <Component /> })

// Remove top panel
pop()

// Access current panels
console.log(panels)
```

--------------------------------

### Page with Grey Background and Custom Scenery Element

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/page.md

Configures the Page component with a grey background theme and specifies a custom element with the ID 'app-wrapper' to apply the background to. Assumes '{children}' is defined in the parent scope.

```typescript
<Page
  sceneryTheme="grey"
  sceneryRef="app-wrapper"
>
  {children}
</Page>
```

--------------------------------

### Confirm Component Import

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/confirm.md

Import the Confirm component from the console-components library.

```typescript
import Confirm from '@alicloud/console-components/rc-confirm'
```

--------------------------------

### Page with Dynamic Scenery Reference

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/page.md

Sets up a Page component with a white background theme and uses a function to dynamically reference an HTML element with the ID 'custom-bg' for applying the background. Assumes '{children}' is defined in the parent scope.

```typescript
<Page
  sceneryTheme="white"
  sceneryRef={() => document.getElementById('custom-bg')}
>
  {children}
</Page>
```

--------------------------------

### Info Display with Structured Content

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/info.md

Shows how to use the Info component with more complex, structured HTML content within the content section.

```typescript
<Info>
  <Info.Title>Server Status</Info.Title>
  <Info.Content>
    <div className="status-details">
      <p>Region: us-east-1</p>
      <p>Instance Type: t3.medium</p>
      <p>Status: Running</p>
    </div>
  </Info.Content>
</Info>
```

--------------------------------

### Import FakeBrowser

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/fake-browser.md

Import the FakeBrowser class from the package. This is typically the first step before using any of its functionalities.

```typescript
import { FakeBrowser } from '@alicloud/console-components-fake-browser'
```

--------------------------------

### Import Info Component

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/info.md

Import the Info component from the console-components library.

```typescript
import Info from '@alicloud/console-components/rc-info'
```

--------------------------------

### Import SlidePanel and usePanelStack

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/slide-panel.md

Import the main SlidePanel component and the usePanelStack hook from the library.

```typescript
import SlidePanel, { usePanelStack } from '@alicloud/console-components/rc-slide-panel'
```

--------------------------------

### Page.Menu API

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/packages/rc-components/rc-page/README.md

Used to define the secondary navigation within the Page.Content. Primary navigation is handled by the `@alicloud/console-components-app-layout` component.

```APIDOC
## Page.Menu

### Description
Used to define the secondary navigation within `Page.Content`. The primary navigation is defined by the `@alicloud/console-components-app-layout` component.

### Sub-components
Page.Menu includes the following sub-components:

| Component    | Inherits From | 
| :----------- | :-----------: |
| Page.Menu    |      Nav      |
| Page.Item    |   Nav.Item    |
| Page.Group   |   Nav.Group   |
| Page.SubMenu |  Nav.SubNav   |
| Page.PopupItem | Nav.PopupItem |
```

--------------------------------

### Import CssVar and CssVarTheme

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/css-var-utils.md

Import the necessary types from the css-var-utils library.

```typescript
import { CssVar, CssVarTheme } from '@alicloud/css-var-utils'
```

--------------------------------

### Data Fields with Custom Rendering

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/data-fields.md

Demonstrates how to format data fields using custom render functions. This is useful for displaying values like currency or status tags.

```typescript
<DataFields
  dataSource={order}
  items={[
    { key: 'id', label: 'Order ID' },
    {
      key: 'amount',
      label: 'Total',
      render: (value) => `¥${value.toFixed(2)}`
    },
    {
      key: 'status',
      label: 'Status',
      render: (value) => <Tag>{value}</Tag>
    }
  ]}
/>
```

--------------------------------

### Table with Search and Pagination

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/table.md

Configures the table with search functionality and pagination controls. Provide placeholder text for search and pagination settings like pageSize, current, and total.

```typescript
<Table
  columns={columns}
  dataSource={data}
  search={{
    placeholder: 'Search users...',
    onSearch: (value) => filterData(value)
  }}
  pagination={{
    pageSize: 20,
    current: 1,
    total: 100
  }}
/>
```

--------------------------------

### Applying Root CSS Variables

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/css-var-utils.md

Demonstrates how to extract theme values and apply them as CSS variables to the document's root element for global styling.

```typescript
// In root CSS or styled global style
const rootStyles = theme.values()
// { primaryColor: '#0070cc', borderRadius: '4px' }

// Apply as CSS variables
Object.entries(rootStyles).forEach(([name, value]) => {
  document.documentElement.style.setProperty(name, value)
})
```

--------------------------------

### Confirm with Different Dialog Types

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/confirm.md

Demonstrates using the 'type' prop to display different confirmation dialog styles like warning, success, and error.

```typescript
// Warning confirmation
<Confirm
  type="warning"
  title="Are you sure?"
  content="This will delete the resource."
  onConfirm={handleDelete}
>
  <Button warning>Delete</Button>
</Confirm>

// Success confirmation
<Confirm
  type="success"
  title="Operation Successful"
  content="The item has been created."
  onConfirm={() => navigate('/')}
>
  <Button type="primary">OK</Button>
</Confirm>

// Error confirmation
<Confirm
  type="error"
  title="Error Occurred"
  content="Failed to process request. Please try again."
  onConfirm={handleRetry}
>
  <Button>Retry</Button>
</Confirm>
```

--------------------------------

### Configure AppLayout Component Height Adjustment

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/configuration.md

Demonstrates different strategies for adjusting the AppLayout component's height, including querying by ID, using fixed pixel offsets, dynamic calculation, and CSS selectors.

```typescript
// Query element by ID (default)
adjustHeight="consoleBaseTopbarRoot"
```

```typescript
// Fixed pixel offset
adjustHeight={64}
```

```typescript
// Dynamic calculation
adjustHeight={() => document.querySelector('#topbar')?.offsetHeight || 0}
```

```typescript
// By selector
adjustHeight="header"
```

--------------------------------

### ConsoleMenu.SubMenu Usage

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/console-menu.md

Shows how to create a hierarchical menu structure using ConsoleMenu.SubMenu to contain other menu items.

```typescript
<ConsoleMenu.SubMenu key="parent" label="Parent">
  <ConsoleMenu.Item key="child1" label="Child 1" />
  <ConsoleMenu.Item key="child2" label="Child 2" />
</ConsoleMenu.SubMenu>
```

--------------------------------

### Support Multi-Theme Application

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/css-var-utils.md

Define a base theme and create variations using .overwrite for different themes like light, dark, and high contrast. The applyTheme function updates CSS variables on the document element.

```typescript
const baseTheme = CssVarTheme.create({
  primary: { default: '#0070cc' },
  secondary: { default: '#999999' },
  background: { default: '#ffffff' }
})

const themes = {
  light: baseTheme,
  dark: baseTheme.overwrite({
    primary: '#1a73e8',
    background: '#1e1e1e'
  }),
  highContrast: baseTheme.overwrite({
    primary: '#ffff00',
    background: '#000000'
  })
}

function applyTheme(themeName: keyof typeof themes) {
  const themeValues = themes[themeName].values()
  Object.entries(themeValues).forEach(([name, value]) => {
    document.documentElement.style.setProperty(name, value)
  })
}
```

--------------------------------

### IItemDescriptor

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/types.md

Describes an individual item within the ConsoleMenu, including its key, label, visibility, render function, and nested items.

```APIDOC
## IItemDescriptor

### Description
Describes an individual item within the ConsoleMenu, including its key, label, visibility, render function, and nested items.

### Interface
```typescript
export interface IItemDescriptor {
  key: string
  label?: React.ReactNode
  disabled?: boolean
  visible?: boolean
  render?: (item: IItemDescriptor) => React.ReactNode
  items?: IItemDescriptor[]
  navProps?: any
  type?: 'divider' | 'item'
}
```

### Used By
ConsoleMenu items array

### File
`packages/rc-components/rc-console-menu/src/types/IItemDescriptor.type.ts`
```

--------------------------------

### Page API

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/packages/rc-components/rc-page/README.md

The main Page component serves as the root for page layout. It typically wraps other page-specific components like Header and Content.

```APIDOC
## Page

### Description
The root component for page layout.

### Props
Refer to [IPageProps](https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-components-page-docs&entryKey=types/IPageProps) for detailed props.
```

--------------------------------

### Styled-Components Integration

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/css-var-utils.md

Shows how to integrate `CssVarTheme` with styled-components to dynamically apply CSS variables to styled elements.

```typescript
import styled from 'styled-components'
import { CssVarTheme } from '@alicloud/css-var-utils'

const theme = CssVarTheme.create({
  primaryColor: { default: '#0070cc' },
  borderRadius: { default: '4px' }
})

const StyledButton = styled.button`
  background-color: ${(props) => theme.vars.primaryColor.consumeStyled(props)};
  border-radius: ${(props) => theme.vars.borderRadius.consumeStyled(props)};
  padding: 8px 16px;
`
```

--------------------------------

### Create a CssVarTheme

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/css-var-utils.md

Create a new theme object using CssVarTheme.create with variable definitions.

```typescript
import { CssVarTheme } from '@alicloud/css-var-utils'

const theme = CssVarTheme.create({
  primaryColor: { default: '#0070cc' },
  secondaryColor: { default: '#999999' },
  borderRadius: { default: '4px' },
  spacing: { default: '8px' }
})
```

--------------------------------

### Configure Table Component with Affix Action Bar

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/configuration.md

Enable a sticky action bar for the Table component using affixActionBar. Control its position and z-index.

```typescript
// Enable all affix
affixActionBar={true}

// Specific position
affixActionBar="top"
affixActionBar={['top', 'bottom']}

// Advanced
affixActionBar={{
  top: { affixMode: 'intersection-observer' },
  bottom: { affixMode: 'sticky' }
}}
```

--------------------------------

### React Integration Import

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/css-var-utils.md

Import necessary hooks and components for React integration. Details are available in the react/ subdirectory of the package.

```typescript
import { useTheme, ThemeProvider } from '@alicloud/css-var-utils/react'
```

--------------------------------

### Configure ConsoleMenu Component

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/configuration.md

Customize the ConsoleMenu component with type, default active and open keys, and an array of item descriptors, each with its own configuration.

```typescript
<ConsoleMenu
  type="primary"
  defaultActiveKey="dashboard"
  defaultOpenKeys={['management']}
  items={[
    { key: 'dashboard', label: 'Dashboard' },
    {
      key: 'management',
      label: 'Management',
      items: [
        { key: 'users', label: 'Users' },
        { key: 'roles', label: 'Roles', disabled: !isAdmin }
      ]
    }
  ]}
/>
```

--------------------------------

### Import Page Component

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/page.md

Import the Page component from the console-components library.

```typescript
import Page from '@alicloud/console-components/rc-page'
```

--------------------------------

### Customizing ConsoleMenu Styles with StyledComponents

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/packages/rc-components/rc-console-menu/README.md

Illustrates how to customize the appearance of ConsoleMenu components using styled-components. This allows for isolated style modifications without affecting global styles or other modules.

```javascript
import styled from 'styled-components'
import ConsoleMenu, { StyledComponents } from '@alicloud/console-components-console-menu'

const CustomizedConsoleMenu = styled(ConsoleMenu)`
  ${StyledComponents.Item} {
    font-size: 14px;
  }
  /* any css is ok here */
`
// CustomizedConsoleMenu中的Item样式已经修改
// ConsoleMenu的样式没有变化
// 可以将CustomizedConsoleMenu理解为ConsoleMenu的“fork”

const App = () => (
  <CustomizedConsoleMenu header="Aliyun Console" items={[{ key: 'overview', label: '概览' }]} />
)
```

--------------------------------

### Provide User Feedback for Table Pagination Errors

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/errors.md

Wrap the `fetchPage` call within the `pagination.onChange` handler in a try-catch block to display an error message if fetching a page fails.

```typescript
<Table
  columns={columns}
  dataSource={data}
  pagination={{
    onChange: (page) => {
      try {
        fetchPage(page)
      } catch (error) {
        message.error('Failed to load page')
      }
    }
  }}
/>
```

--------------------------------

### Define Design System Tokens

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/css-var-utils.md

Create a set of design tokens for colors, spacing, typography, and borders using CssVarTheme.create. Use the .consume property to access and apply these variables in CSS strings.

```typescript
const designTokens = CssVarTheme.create({
  // Colors
  colorPrimary: { default: '#0070cc', desc: 'Primary brand color' },
  colorSuccess: { default: '#28a745', desc: 'Success state color' },
  colorError: { default: '#f5222d', desc: 'Error state color' },
  
  // Spacing
  spacingBase: { default: '8px' },
  spacingSm: { default: '4px' },
  spacingLg: { default: '16px' },
  
  // Typography
  fontSizeBase: { default: '14px' },
  fontWeightBold: { default: '700' },
  
  // Border
  borderRadius: { default: '4px' },
  borderWidth: { default: '1px' }
})

// Use throughout application
const buttonStyle = `
  color: ${designTokens.vars.colorPrimary.consume};
  padding: ${designTokens.vars.spacingBase.consume};
  border-radius: ${designTokens.vars.borderRadius.consume};
`
```

--------------------------------

### Page Component

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/page.md

The root Page component manages background color and provides layout structure. It accepts various props to customize its appearance and behavior.

```APIDOC
## Page Component

### Description
Root page container that manages background color and provides layout structure.

### Props

#### `children`
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: Page content.

#### `className`
- **Type**: `string`
- **Required**: No
- **Description**: Wrapper class name.

#### `style`
- **Type**: `React.CSSProperties`
- **Required**: No
- **Description**: Wrapper inline styles.

#### `sceneryTheme`
- **Type**: `'white' | 'grey'`
- **Default**: `'white'`
- **Required**: No
- **Description**: Background color theme. Can be 'white' or 'grey'.

#### `sceneryRef`
- **Type**: `string | boolean | (() => HTMLElement)`
- **Default**: `() => document.body`
- **Required**: No
- **Description**: Element to apply background. Can be a string selector, a boolean `false` to disable, or a function returning an HTMLElement.

### Examples

Basic page with white background:
```typescript
import Page from '@alicloud/console-components/rc-page'
import AppLayout from '@alicloud/console-components/rc-app-layout'

export function Dashboard() {
  return (
    <Page sceneryTheme="white">
      <AppLayout nav={<Nav />}>
        <Page.Header title="Dashboard" />
        <Page.Content>
          {/* Main content */}
        </Page.Content>
      </AppLayout>
    </Page>
  )
}
```

With grey background and custom scenery element:
```typescript
<Page
  sceneryTheme="grey"
  sceneryRef="app-wrapper"
>
  {children}
</Page>
```

Disabling background management:
```typescript
<Page sceneryTheme="white" sceneryRef={false}>
  {/* No background color applied */}
</Page>
```

Dynamic scenery reference:
```typescript
<Page
  sceneryTheme="white"
  sceneryRef={() => document.getElementById('custom-bg')}
>
  {children}
</Page>
```
```

--------------------------------

### ConsoleMenu Data-Driven Navigation

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/console-menu.md

Configure a primary navigation menu using the 'items' prop for a data-driven approach. This is suitable for dynamic menu content.

```typescript
const menuItems = [
  { key: 'dashboard', label: 'Dashboard' },
  {
    key: 'resources',
    label: 'Resources',
    items: [
      { key: 'instances', label: 'Instances' },
      { key: 'storage', label: 'Storage' }
    ]
  },
  { key: 'settings', label: 'Settings' }
]

<ConsoleMenu
  type="primary"
  items={menuItems}
  activeKey="dashboard"
  onItemClick={(key) => navigate(`/${key}`)}
/>
```

--------------------------------

### IConsoleMenuProps

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/types.md

Props for the ConsoleMenu component, extending NavProps to define menu types, headers, items, and selection/open states.

```APIDOC
## IConsoleMenuProps

### Description
Props for the ConsoleMenu component, extending NavProps to define menu types, headers, items, and selection/open states.

### Interface
```typescript
export interface IConsoleMenuProps
  extends Omit<NavProps, 'onItemClick' | 'onOpen'> {
  type?: 'primary' | 'secondary'
  header?: React.ReactNode
  headers?: string[]
  onSelectHeader?: (value: string) => void
  items?: IItemDescriptor[]
  children?: React.ReactNode
  activeKey?: string
  defaultActiveKey?: string
  openKeys?: string | string[]
  defaultOpenKeys?: string | string[]
  defaultOpenAll?: boolean
  onItemClick?: (key: string, itemInfo: any, event: MouseEvent) => void
  onOpen?: (openKeys: string[], openInfo: { key: string; open: boolean }) => void
}
```

### Used By
ConsoleMenu component

### File
`packages/rc-components/rc-console-menu/src/types/IConsoleMenuProps.type.ts`
```

--------------------------------

### Create a Theme Variant with Overrides

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/css-var-utils.md

Create a new theme variant by overriding specific CSS variable values from an existing theme.

```typescript
const darkTheme = theme.overwrite({
  primaryColor: '#1a73e8',
  secondaryColor: '#ffffff'
})

const lightTheme = theme.overwrite({
  primaryColor: '#0070cc',
  secondaryColor: '#333333'
})
```

--------------------------------

### ConsoleMenu Declarative Navigation (JSX)

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/console-menu.md

Render a primary navigation menu using JSX for defining menu items and submenus. Use this for static menu structures.

```typescript
import ConsoleMenu from '@alicloud/console-components/rc-console-menu'

function Navigation() {
  return (
    <ConsoleMenu type="primary" defaultActiveKey="dashboard">
      <ConsoleMenu.Item key="dashboard" label="Dashboard" />
      <ConsoleMenu.SubMenu key="resources" label="Resources">
        <ConsoleMenu.Item key="instances" label="Instances" />
        <ConsoleMenu.Item key="storage" label="Storage" />
      </ConsoleMenu.SubMenu>
      <ConsoleMenu.Divider key="divider1" />
      <ConsoleMenu.Item key="settings" label="Settings" />
    </ConsoleMenu>
  )
}
```

--------------------------------

### Import Table Component

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/table.md

Import the Table component from the console-components library.

```typescript
import Table from '@alicloud/console-components/rc-table'
```

--------------------------------

### Indicating Deployment Status

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/status-indicator.md

Illustrates how to use StatusIndicator to show the live and deploying status of a service in different environments. It combines text labels with the visual indicator.

```typescript
<div className="deployment-item">
  <span>Production:</span>
  <StatusIndicator type="success">Live</StatusIndicator>
  <span>Staging:</span>
  <StatusIndicator type="loading">Deploying</StatusIndicator>
</div>
```

--------------------------------

### Configure Announcement Component Props

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/configuration.md

Configure the Announcement component with message type, closeability, and slider options for auto-rotation, speed, arrows, and dots.

```typescript
<RcAnnouncement
  dataSource={items}
  type="warning"
  closeable={true}
  sliderOptions={{
    autoplay: true,
    autoplaySpeed: 5000,
    arrows: true
  }}
/>
```

--------------------------------

### Basic SlidePanel Structure

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/slide-panel.md

Demonstrates the basic structure of a SlidePanel with multiple SlidePanelItems within a SlidePanelGroup.

```typescript
import SlidePanel, { SlidePanelGroup, SlidePanelItem } from '@alicloud/console-components/rc-slide-panel'

function PanelExample() {
  return (
    <SlidePanel>
      <SlidePanelGroup>
        <SlidePanelItem key="panel1" title="Panel 1">
          <div>Content for panel 1</div>
        </SlidePanelItem>
        <SlidePanelItem key="panel2" title="Panel 2">
          <div>Content for panel 2</div>
        </SlidePanelItem>
      </SlidePanelGroup>
    </SlidePanel>
  )
}
```

--------------------------------

### Actions.LinkButton as Navigation Link

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/actions.md

Demonstrates using LinkButton as a navigation link by specifying the 'Component' prop as an anchor ('a') tag and providing an 'href' attribute.

```typescript
<Actions.LinkButton Component="a" href="/items/123">
  View Details
</Actions.LinkButton>
```

--------------------------------

### Table with Column Definitions

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/table.md

Defines table columns using the Table.Column sub-component for key, label, and rendering custom actions.

```typescript
<Table dataSource={data}>
  <Table.Column key="id" label="ID" width={100} />
  <Table.Column key="name" label="Name" />
  <Table.Column key="actions" label="Actions" render={renderActions} />
</Table>
```

--------------------------------

### RoutableMenu for Dva Integration

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/packages/rc-components/rc-console-menu/README.md

Introduces RoutableMenu, a component designed for projects using dva^2.0.0, providing integrated routing functionality. Note: Currently, it primarily supports 'items' for configuration.

```javascript
import RoutableMenu from '@alicloud/console-components-console-menu/RoutableMenu'

const items = [
  {
    // 在当前路由路径为 `/overview` 时将该 Item 变为选中状态
    key: '/overview',
    label: '概览',
    // 点击该 Item 会跳转至 `/overview`
    to: '/overview'
  },
  {
    key: '/product/:region',
    label: '产品',
    to: '/product/cn-hangzhou'
  },
  {
    // 在当前路由路径匹配 `/instance/:region?` 时将该 Item 变为选中状态
    key: '/instance/:region?',
    label: '实例',
    to: (routeProps, item) => {
      // 该方法并不是我们推荐的做法，只是为了表示 `to` 可以用函数表达式来声明：
      // 第一个参数是当前的 route props ，第二个参数是当前的 item 的结构化信息
      // 你可以利用这些信息来动态地返回需要进行跳转的 pathname 或 location
      // 下面的这个例子使用了当前路由的匹配信息（注意：并不是对于该 item 的匹配）
      // 来进行相应的跳转。如果当前的路由中包含 param: region ，（譬如从
      // `/product/cn-hangzhou` 点击该 item 将会跳转到 `/instance/cn-hangzhou`
      //
      // 在实际项目中的最佳实践是直接派发父级 pathname ，然后在 <Route> 中通过上下文
      // 或者其他方式进行路由重定向
      //
      const { match: { params: { region } = {} } = {} } = routeProps
      return `/instance/${region}`
    },
    // 除了使用 `key` 来匹配单个的路由路径之外，还可以使用 `activePathPatterns` 来
    // 尝试匹配多个路由路径，`<RoutableMenu>` 内置的匹配算法将会在尝试将当前的路径匹配
    // `key` 失败之后，按照 `activePathPatterns` 指定的顺序依次进行尝试匹配，一旦匹配
    // 成功，则将该 Item 变为选中状态
    activePathPatterns: [
      '/instance/:regionId/:instanceId',
    ],
  },
  {
    key: 'logs',
    label: '列表',
    items: [
      {
        key: '/daily',
        label: '日常',
        // 使用 href 将使用超链接的方式打开指定的链接，区别于应用内的路由跳转
        href: 'https://daily.project.com',
      },
      {
        key: '/prod',
        label: '生产',
        to: '/prod',
      },
    ]
  },
]

const App = () => (
  <RoutableMenu header="Aliyun Console" items={items} />
)
```

--------------------------------

### Define a CSS Variable

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/css-var-utils.md

Create a CssVar instance with a name, default value, and description.

```typescript
const primaryColor = new CssVar({
  name: '--primary-color',
  default: '#0070cc',
  desc: 'Primary brand color'
})
```

--------------------------------

### ConsoleMenu.Divider Usage

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/api-reference/console-menu.md

Illustrates the use of ConsoleMenu.Divider to visually separate groups of menu items.

```typescript
<ConsoleMenu.Divider key="divider1" />
```

--------------------------------

### Show Confirm Dialog Programmatically

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/configuration.md

Trigger confirmation dialogs programmatically using showConfirmDialog. Customize dialog properties like width.

```typescript
showConfirmDialog({
  type: 'warning',
  title: 'Delete Item',
  dialogProps: { width: 480 }
})
```

--------------------------------

### Configure Confirm Component with Dialog Props

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/configuration.md

Use the Confirm component for dialogs with custom types, titles, and content. Configure dialog appearance using dialogProps.

```typescript
<Confirm
  type="warning"
  title="Confirm Delete"
  content="This action cannot be undone"
  dialogProps={{ width: 400 }}
  messageProps={{ className: 'custom-message' }}
>
  <Button>Delete</Button>
</Confirm>
```

--------------------------------

### IDefineCssVars Interface

Source: https://github.com/aliyun/alibabacloud-console-components/blob/master/_autodocs/types.md

Defines the structure for defining CSS variables, including optional default values and descriptions.

```APIDOC
## Interface IDefineCssVars

### Description
An interface used for defining CSS variables. It allows specifying an optional default value and description for each variable.

### Properties
- `[name: string]: IDefineCssVar` - An index signature where each key is the name of a CSS variable, and the value is an `IDefineCssVar` object.
```