[主框架组件文档](/ecode/playground/doc/share/view/1022992915720224769)

[主框架SDK文档](/ecode/playground/doc/share/view/1183567561081184260)

[基础服务二开文档](/ecode/playground/doc/share/view/1023781106639618049)

[基础服务配置文档](/ecode/playground/doc/share/view/1183582498868387841)

# 主框架组件文档

### 1.账户信息组件
#### 图片展示


![](${appMdRes}/1721633928-image.png)

#### 已知调用方
--特色主题搭建使用

#### 完整代码示例

```
import { CorsComponent } from '@weapp/ui';
import React from 'react';

 <CorsComponent
   app="@weapp/layout"
   compName="AccountInfo"
   className='xxx'
 />
```
### 2.账号信息下团队切换与展示组件
#### 图片展示



![](${appMdRes}/1721634181-image.png)

#### 已知调用方
--特色主题搭建使用

#### 完整代码示例

```
import { CorsComponent, Icon } from '@weapp/ui';
import React from 'react';

 <CorsComponent
   app="@weapp/layout"
   compName="TenantDropCom"
   className='xxx'
 />
```
### 3.更多应用下拉组件
#### 图片展示

![](${appMdRes}/1721634686-image.png)
#### 已知调用方
--特色主题搭建使用

#### 完整代码示例
*注：该组件抛出的是下拉的内容区域，需使用方根据实际业务触发展示*
```
import { Trigger, Icon, CorsComponent } from '@weapp/ui';

<CorsComponent weId={`${props.weId || ''}_lfe0xv`}
 app='@weapp/layout'
 compName="AppDropMenusCom"  />
```
### 4.全文检索组件
#### 图片展示

![](${appMdRes}/1721642183-image.png)
#### 已知调用方
--特色主题搭建使用
#### 完整代码示例

```
import { CorsComponent } from '@weapp/ui';
import React from 'react';
 <CorsComponent
   app="@weapp/layout"
   compName="QuickSearchCom"
   popupClassName={'poup_xxx'}
   className='xxx'
 />
```
### 5.主框架右键菜单组件
#### 图片展示

![](${appMdRes}/1721642974-image.png)

#### 已知调用方
--特色主题搭建使用

#### 完整代码示例
*注：该组件抛出的是下拉的内容区域，需使用方根据实际业务触发展示*

```
import { CorsComponent } from '@weapp/ui';
import { Trigger, Avatar, Icon ,CorsComponent} from '@weapp/ui';
import React from 'react';

   <Trigger
        forceRender={true}
        popup={
            <CorsComponent
            weId={`${this.props.weId || ''}_novaor`}
            app="@weapp/layout"
            compName="QuickMenusCom"
            externalMenus={navMenus_more ||[]} //外部传入节点
            handlePopupVisible={this.onPopupVisibleChange}
          />
        }
        popupPlacement="bottomRight"
        popupVisible={popupVisible}
        onPopupVisibleChange={this.onPopupVisibleChange}
        popupClassName={popupClassName}
      >
        <div>
           触发右键菜单内容展示
        </div>
      </Trigger>
```
### 6.快速新建组件
#### 图片展示

![](${appMdRes}/1721643430-image.png)

#### 已知调用方
--特色主题搭建使用

#### 完整代码示例
*注：该组件抛出的是下拉的内容区域，需使用方根据实际业务触发展示*

```
import { CorsComponent } from '@weapp/ui';
import { Trigger, Avatar, Icon ,CorsComponent} from '@weapp/ui';
import React from 'react';

   <Trigger
        popup={
            <CorsComponent
            weId={`${this.props.weId || ''}_novaor`}
            app="@weapp/layout"
            compName="FastCreateMenusCom"
            handlePopupVisible={this.onPopupVisibleChange}
          />
        		}
        popupPlacement="bottomRight"
        popupVisible={popupVisible}
      >
        <div>
          触发显示
        </div>
      </Trigger>
```
### 7.快速新建组件
#### 图片展示

![](${appMdRes}/1721645746-image.png)
#### 已知调用方
--特色主题搭建使用

#### 完整代码示例
*注：该组件抛出的是下拉的内容区域，需使用方根据实际业务触发展示*

```
import { CorsComponent } from '@weapp/ui';
import { Trigger, Avatar, Icon ,CorsComponent} from '@weapp/ui';
import React from 'react';

   <Trigger
        popup={
            <CorsComponent
            weId={`${this.props.weId || ''}_novaor`}
            app="@weapp/layout"
            compName="CountTabCom"
            popupVisible={popupVisible}
          />
        		}
        popupPlacement="bottomRight"
        popupVisible={popupVisible}
      >
        <div>
          触发显示
        </div>
      </Trigger>
```
### 8.待办事项、数量展示下拉组件
#### 图片展示

![](${appMdRes}/1721644954-image.png)

#### 已知调用方
--特色主题搭建使用
#### 完整代码示例
*注：该组件抛出的是下拉的内容区域，需使用方根据实际业务触发展示*

```
import { CorsComponent } from '@weapp/ui';
import { Trigger, Avatar, Icon ,CorsComponent} from '@weapp/ui';
import React from 'react';

   <Trigger
        popup={
            <CorsComponent
            weId={`${this.props.weId || ''}_novaor`}
            app="@weapp/layout"
            compName="CountTabCom"
            popupVisible={popupVisible}
          />
        		}
        popupPlacement="bottomRight"
        popupVisible={popupVisible}
      >
        <div>
          触发显示
        </div>
      </Trigger>
```
### 9.服务中心下拉组件
#### 图片展示

![](${appMdRes}/1721645499-image.png)
#### 已知调用方
--特色主题搭建使用
#### 完整代码示例
*注：该组件抛出的是下拉的内容区域，需使用方根据实际业务触发展示*

```
import { CorsComponent } from '@weapp/ui';
import { Trigger, Avatar, Icon ,CorsComponent} from '@weapp/ui';
import React from 'react';

   <Trigger
        popup={
            <CorsComponent
            weId={`${this.props.weId || ''}_novaor`}
            app="@weapp/layout"
            compName="HelpDropCom"
            popupVisible={popupVisible}
            handlePopupVisible={this.onPopupVisibleChange}
          />
        		}
        popupPlacement="bottomRight"
        popupVisible={popupVisible}
        handlePopupVisible={this.onPopupVisibleChange}
      >
        <div>
          触发显示
        </div>
      </Trigger>
```
### 10.企业微信及终端弹窗组件
#### 图片展示

![](${appMdRes}/1721646255-image.png)

#### 已知调用方
--特色主题搭建使用
#### 完整代码示例

```
import { CorsComponent } from '@weapp/ui';
import React from 'react';

  <CorsComponent
    app="@weapp/layout"
    compName="TerminalDialogCom"
    visible={visible}
    onClose={this.onClose}
  />
```
### 11.企业微信及终端内容区域组件（不带弹窗）
#### 图片展示

![](${appMdRes}/1721646467-image.png)
#### 已知调用方
--特色主题搭建使用
#### 完整代码示例

```
import { CorsComponent } from '@weapp/ui';
import React from 'react';

  <CorsComponent
    app="@weapp/layout"
    compName="Terminal"
  />
```
### 12.邀请弹窗组件
#### 图片展示

![](${appMdRes}/1721646632-image.png)
#### 已知调用方
--特色主题搭建使用
#### 完整代码示例

```
import { CorsComponent } from '@weapp/ui';
import React from 'react';

  <CorsComponent
    app="@weapp/layout"
    compName="InviteDialogCom"
    visible={visible}
    onClose={this.onClose}
  />
```
### 12.创建团队弹窗组件
#### 图片展示
![](${appMdRes}/1721646791-image.png)
#### 已知调用方
--特色主题搭建使用
#### 完整代码示例

```
import { CorsComponent } from '@weapp/ui';
import React from 'react';

  <CorsComponent
    app="@weapp/layout"
    compName="TenantsDialogCom"
    visible={visible}
    onClose={this.onClose}
  />
```
### 13.推荐拿福利弹窗组件
#### 图片展示

![](${appMdRes}/1721646886-image.png)
#### 已知调用方
--特色主题搭建使用
#### 完整代码示例

```
import { CorsComponent } from '@weapp/ui';
import React from 'react';

  <CorsComponent
    app="@weapp/layout"
    compName="InviteWelfareDialogCom"
    visible={visible}
    onClose={this.onClose}
  />
```
### 14.清除缓存弹窗组件
#### 图片展示
![](${appMdRes}/1721646973-image.png)
#### 已知调用方
--特色主题搭建使用
#### 完整代码示例

```
import { CorsComponent } from '@weapp/ui';
import React from 'react';

  <CorsComponent
    app="@weapp/layout"
    compName="ClearCacheDialogCom"
    visible={visible}
    onClose={this.onClose}
  />
```
### 15.更多应用-设置弹窗组件
#### 图片展示
![](${appMdRes}/1721647056-image.png)
#### 已知调用方
--特色主题搭建使用
#### 完整代码示例

```
import { CorsComponent } from '@weapp/ui';
import React from 'react';

  <CorsComponent
    app="@weapp/layout"
    compName=""
    visible={visible}
    onClose={this.onClose}
  />
```
### 16.导航菜单项展示组件
#### 图片展示
![](${appMdRes}/1721647244-image.png)
#### 已知调用方
--特色主题搭建使用
#### 完整代码示例

```
import { CorsComponent } from '@weapp/ui';
import React from 'react';

  <CorsComponent
    app="@weapp/layout"
    compName="AppMainMenusCom"
  />
```

### 17.菜单角标组件
#### 图片展示
![](${appMdRes}/微信图片_20241022190223.png)
#### 完整代码示例

```
<CorsComponent weId={`${this.props.weId || ''}_bxxnp3`}
  app='@weapp/layout'
  compName='CornerMarkerCom'
  getRef={(ref: any) => { window.__REF = ref }}
  config={{
    showType: 2,
    iconConfig: "",
    iconData: "/api/doc/report/getDocumentUnReadCornerCount?cornerType=1&maxCornerCount=999",
  }}
  offset={{ right: 2, top: 2, left: 'unset' }}>
  <MenuItem weId={`${this.props.weId || ''}_7orwsa`}
    menuname={moreAppMenuConfig?.i18nCustomMenuName || moreAppMenuConfig?.i18nMenuName || getLabel('62175', '更多应用')} />
  <Icon weId={`41po83`} name='Icon-Down-arrow01' size='xs' />
</CorsComponent>
```

#### 组件参数说明
|参数名|	说明|	类型|	是否必填|	默认值
|--|--|--|--|--|
|value|角标数据（设置后，角标配置参数将无效)|number|否||
|config|角标配置参数|CornerMarkerConfig|否||
|offset|角标位置|{left: number,right: number,top: number,bottom: number}|否|
|refreshId|角标更新id（设置后可以通过window.weappLayout?.LayoutSDK.utils.updateCornerMarker?.(refreshId); 更新角标。）|string|否|
|customRender|自定义渲染角标|(count?: number) => ReactNode|否|
|getRef|获取组件对象|(ref?: any) => void|否|

#### 角标配置 CornerMarkerConfig 参数说明

|参数名|	说明|	类型|	是否必填|	默认值
|--|--|--|--|--|
|showType|显示类型（0：不显示，1：红点，2：数字，3：icon素材）|number|否|0|
|iconConfig|showType等于3时需传||否||
|iconData|角标数据接口|string|否||

应用菜单可通过window.weappLayout?.LayoutSDK.utils.getAppMarkerSetting?.(appData);方法获取

导航工具菜单直接取值 toolMenuData.cornerMarkSetting

#### 数据交互 - 更新角标显示

window.weappLayout?.LayoutSDK.utils.updateCornerMarker?.(refreshId, count);

refreshId 对应角标更新id参数

count 为需要更新的数量，不传时，通过接口查询