@das-fed/web-components 6.4.0-test.1 → 6.4.0-test.2.1

package/README.md

@@ -1,410 +1,410 @@
-## das-ce-tabs 使用方法
-
-1. **引入 `das-ce-tabs` 组件并注册**。
-
-```js
-import { createCeTabs } from '@das-fed/web-components'
-createCeTabs('das-ce-tabs')
-```
-
-2. **定义 `options` 和 `modelValue` 属性**。
-
-`das-ce-tabs` 接收 `options` 和 `modelValue` 属性，`options` 属性配置如下：
-
-```js
-interface TabOption {
-  /** 唯一标识 */
-  key: string | number
-  /** 选项卡头显示文字 */
-  tab: string
-  /** 是否禁用 */
-  disabled?: boolean
-  /** 是否隐藏 */
-  hidden?: boolean
-  /** 被隐藏时是否渲染 DOM 结构 */
-  forceRender?: boolean
-  /** tab显示文字插槽 */
-  tabSlot?: string
-  /** 关闭图标插槽 */
-  closeIconSlot?: string
-  /** 显示内容插槽 */
-  contentSlot?: string
-}
-```
-
-定义实例如下：
-
-```js
-const activeKey = ref(1)
-
-const options = ref([
-  { key: 1, tab: 'Tab 1' },
-  { key: 2, tab: 'Tab 2', disabled: true },
-  { key: 3, tab: 'Tab 3' },
-])
-```
-
-3. **监听组件事件**
-
-使用组件时，监听到的事件对象为 `customEvent` ，该对象中的 `detail` 属性是个数组，数组元素为组件事件的返回值。 `das-ce-tabs` 组件暴露了以下事件：
-
-1. `update:modelValue`：当 `modelValue` 属性变化时触发，要实现切换页签时 `activeKey` 属性自动变化，需要监听该事件。
-
-```js
-import { ref } from 'vue'
-import { createCeTabs } from '@das-fed/web-/components'
-createCeTabs('das-ce-tabs')
-
-const activeKey = ref(1)
-
-const options = ref([
-  { key: 1, tab: 'Tab 1' },
-  { key: 2, tab: 'Tab 2', disabled: true },
-  { key: 3, tab: 'Tab 3' },
-])
-```
-
-```html
-<das-ce-tabs
-  :modelValue="activeKey"
-  :options="options"
-  @update:modelValue="(customEvent) => (activeKey = customEvent.detail[0])"
-></das-ce-tabs>
-```
-
-2. `tabClick`：当 `tab` 被点击时触发。返回被点击页签的 `key` 值。
-
-```js
-import { ref } from 'vue'
-import { createCeTabs } from '@das-fed/web-components/components'
-createCeTabs('das-ce-tabs')
-
-const activeKey = ref(1)
-
-const options = ref([
-  { key: 1, tab: 'Tab 1' },
-  { key: 2, tab: 'Tab 2', disabled: true },
-  { key: 3, tab: 'Tab 3' },
-])
-
-const tabClick = (customEvent) => {
-  console.log('当前点击页签的key: ', customEvent.detail[0])
-}
-```
-
-```html
-<das-ce-tabs :modelValue="activeKey" :options="options" @tabClick="tabClick"></das-ce-tabs>
-```
-
-3. `tabDelete`：当 `tab` 被删除时触发。返回被删除页签的 `key` 值。
-
-```js
-import { ref } from 'vue'
-import { createCeTabs } from '@das-fed/web-components/components'
-createCeTabs('das-ce-tabs')
-
-const activeKey = ref(1)
-
-const options = ref([
-  { key: 1, tab: 'Tab 1' },
-  { key: 2, tab: 'Tab 2', disabled: true },
-  { key: 3, tab: 'Tab 3' },
-])
-
-const tabDelete = (customEvent) => {
-  console.log('当前删除页签的key：', customEvent.detail[0])
-}
-```
-
-```html
-<das-ce-tabs :modelValue="activeKey" :options="options" @tabDelete="tabDelete"></das-ce-tabs>
-```
-
-4. `menuClick`：当右键呼出的操作项选中时触发。返回被选中的操作项和当前右键操作的页签对象。
-
-```js
-import { ref } from 'vue'
-import { createCeTabs } from '@das-fed/web-components/components'
-createCeTabs('das-ce-tabs')
-
-const activeKey = ref(1)
-
-const options = ref([
-  { key: 1, tab: 'Tab 1' },
-  { key: 2, tab: 'Tab 2', disabled: true },
-  { key: 3, tab: 'Tab 3' },
-])
-
-const menuClick = (customEvent) => {
-  console.log('当前选中操作项：', customEvent.detail[0], '当前页签对象：', customEvent.detail[1])
-}
-```
-
-```html
-<das-ce-tabs :modelValue="activeKey" :options="options" @menuClick="menuClick"></das-ce-tabs>
-```
-
-操作项定义如下：
-
-```js
-interface MenuListType {
-  /** 唯一标识 */
-  key: string | number
-  /** 操作项名称 */
-  name: string
-  /** 是否隐藏 */
-  hidden?: boolean | Function
-  /** 是否禁用 */
-  disabled?: boolean | Function
-}
-```
-
-5. `pageRefresh`: 当点击右侧刷新按钮时触发。无返回值。
-
-```js
-import { ref } from 'vue'
-import { createCeTabs } from '@das-fed/web-components/components'
-createCeTabs('das-ce-tabs')
-
-const activeKey = ref(1)
-
-const options = ref([
-  { key: 1, tab: 'Tab 1' },
-  { key: 2, tab: 'Tab 2', disabled: true },
-  { key: 3, tab: 'Tab 3' },
-])
-
-const pageRefresh = () => {
-  console.log('刷新')
-}
-```
-
-```html
-<das-ce-tabs :modelValue="activeKey" :options="options" @pageRefresh="pageRefresh"></das-ce-tabs>
-```
-
-6. `toggleFullScreen`: 切换全屏状态。无返回值。
-
-```js
-import { ref } from 'vue'
-import { createCeTabs } from '@das-fed/web-components/components'
-createCeTabs('das-ce-tabs')
-
-const activeKey = ref(1)
-
-const options = ref([
-  { key: 1, tab: 'Tab 1' },
-  { key: 2, tab: 'Tab 2', disabled: true },
-  { key: 3, tab: 'Tab 3' },
-])
-
-const toggleFullScreen = () => {
-  console.log('全屏')
-}
-```
-
-```html
-<das-ce-tabs :modelValue="activeKey" :options="options" @toggleFullScreen="toggleFullScreen"></das-ce-tabs>
-```
-
-## das-ce-nav 使用方法
-
-### 1. **引入 `das-ce-nav` 组件并注册**。
-
-```js
-import { createCeNav } from '@das-fed/web-components'
-createCeNav('das-ce-nav')
-```
-
-#### ① 在 vue 文件中使用
-
-```html
-<das-ce-nav
-  @update:modelValue="(event) => (activeKey = event.detail[0])"
-  :modelValue="activeKey"
-  @handleTabClick="handleTabClick"
-  @handleTabDelete="handleTabDelete"
-  :config="config"
-  :logoUrl="logoUrl"
-  :searchConfig="searchConfig"
-  @searchToPage="searchToPage"
-  @clearSearchList="clearSearchList"
-  @deleteSearchItem="deleteSearchItem"
-  :userInfoConfig="userInfoConfig"
-  @userCommandHandle="userCommandHandle"
-  :projectTreeConfig="projectTreeConfig"
-  @changeTreeHandle="changeTreeHandle"
-  :innerPagesConfig="innerPagesConfig"
-  @changeInnerPage="changeInnerPage"
-></das-ce-nav>
-```
-
-#### ① 在 html 文件中使用
-
-```html
-<head>
-  <script type="module">
-    import { createCeNav } from '@das-fed/web-components'
-    createCeNav('das-ce-nav')
-    const handleTabClick = (event) => {
-      console.log(event)
-    }
-    const dasceNavEle = document.getElementsByTagName('das-ce-nav')[0]
-    dasceNavEle.addEventListener('handleTabClick', handleTabClick)
-  </script>
-</head>
-<body>
-  <das-ce-nav
-    @update:modelValue="(event) => (activeKey = event.detail[0])"
-    :modelValue="activeKey"
-    :config="config"
-    :logoUrl="logoUrl"
-    :searchConfig="searchConfig"
-    :userInfoConfig="userInfoConfig"
-    :projectTreeConfig="projectTreeConfig"
-    :innerPagesConfig="innerPagesConfig"
-  ></das-ce-nav>
-</body>
-```
-
-### 2. **属性**
-
-| 属性名            | 描述          | 类型                                      | 默认值                                    | 是否必填 |
-| ----------------- | ------------- | ----------------------------------------- | ----------------------------------------- | -------- |
-| modelValue        | 当前选中菜单  | string/number                             | -                                         | 是       |
-| config            | 导航栏配置    | [config](###config)                       | [config](###config)                       | 是       |
-| logoUrl           | logo 图片链接 | string                                    | -                                         | 否       |
-| innerPagesConfig  | 内置页面配置  | [innerPagesConfig](###innerPagesConfig)   | [innerPagesConfig](###innerPagesConfig)   | 否       |
-| searchConfig      | 搜索配置      | [searchConfig](###searchConfig)           | [searchConfig](###searchConfig)           | 否       |
-| userInfoConfig    | 用户信息配置  | [userInfoConfig](###userInfoConfig)       | [userInfoConfig](###userInfoConfig)       | 否       |
-| projectTreeConfig | 项目树配置    | [projectTreeConfig](###projectTreeConfig) | [projectTreeConfig](###projectTreeConfig) | 否       |
-
-### config
-
-| 属性名          | 描述               | 类型                               | 默认值 | 是否必填 |
-| --------------- | ------------------ | ---------------------------------- | ------ | -------- |
-| showSearch      | 是否显示搜索       | bool                               | false  | 否       |
-| showProjectTree | 是否显示项目下拉树 | bool                               | false  | 否       |
-| subAppList      | 导航栏菜单数据     | {name:string,code:string/number}[] | -      | 否       |
-
-### innerPagesConfig
-
-| 属性名              | 描述               | 类型                            | 默认值 | 是否必填 |
-| ------------------- | ------------------ | ------------------------------- | ------ | -------- |
-| activeInnerPagePath | 内置菜单当前选中值 | string/number                   | false  | 否       |
-| innerPages          | 内置菜单数据       | {title: string, path: string}[] | false  | 否       |
-
-### searchConfig
-
-| 属性名         | 描述             | 类型                          | 默认值                      | 是否必填 |
-| -------------- | ---------------- | ----------------------------- | --------------------------- | -------- |
-| defaultProps   | -                | {value: string,label: string} | {value: 'id',label: 'name'} | 否       |
-| getHistoryList | 获取历史搜索记录 | () => Promise<any>            | -                           | 否       |
-| getSearchList  | 获取菜单         | () => Promise<any>            | -                           | 否       |
-| addHistory     | 添加历史记录     | (data:any) => void            | -                           | 否       |
-
-### userInfoConfig
-
-| 属性名        | 描述           | 类型                                               | 默认值 | 是否必填 |
-| ------------- | -------------- | -------------------------------------------------- | ------ | -------- |
-| headPicture   | 用户头像       | 默认头像                                           | 否     |
-| commandList   | 用户信息操作项 | () => Promise<any>                                 | -      | 否       |
-| getSearchList | 获取菜单       | {value?: string /number,label?: string / number}[] | -      | 否       |
-
-### projectTreeConfig
-
-| 属性名              | 描述                               | 类型                                                               | 默认值                      | 是否必填 |
-| ------------------- | ---------------------------------- | ------------------------------------------------------------------ | --------------------------- | -------- |
-| projectStore        | 项目数据                           | -                                                                  | 否                          |
-| defaultProps        | -                                  | {value: string,label: string}                                      | {value: 'id',label: 'name'} | 否       |
-| treeProps           | 树组件配置                         | [TreeOptionProps](###TreeOptionProps)                              | -                           | 否       |
-| filterNode          | 搜索过滤                           | (value: any, data: any) => [projectTreeType](###projectTreeType)[] | -                           | 否       |
-| filterFlatCondition | 树切换平铺，符合条件的加入平铺列表 | (data: any) => boolean[]                                           | -                           | 否       |
-
-### TreeOptionProps
-
-```js
-interface TreeOptionProps {
-  label?: string // 默认name
-  pathName?: string // 默认pathName
-  children?: string // 默认children
-  parentId?: string // 默认parentId
-  disabled?: string | ((data: TreeNodeData, node?: Node) => boolean) // 默认disabled
-  isLeaf?: string | ((data: TreeNodeData, node?: Node) => boolean) // 默认leaf;懒加载不支持方法
-  // 允许取消选中（keepSelected为true时生效）
-  allowUnSelect?: string | ((data: TreeNodeData) => boolean) // 默认allowUnSelect
-  class?: (
-    data: TreeNodeData,
-    node: Node,
-  ) =>
-    | string
-    | {
-        [key: string]: boolean
-      }
-    | string
-}
-```
-
-### projectTreeType
-
-| 属性名   | 描述                                       | 类型                                  | 默认值 | 是否必填 |
-| -------- | ------------------------------------------ | ------------------------------------- | ------ | -------- |
-| -        | 唯一标识（可使用 defaultProps.value 配置） | id                                    | 是     |
-| -        | 项目名称（可使用 defaultProps.label 配置） | name                                  | 是     |
-| children | 树组件配置                                 | [projectTreeType](###projectTreeType) | -      | 否       |
-
-### 3. **事件**
-
-| 事件              | 说明                        | 回调参数                        |
-| ----------------- | --------------------------- | ------------------------------- |
-| handleTabClick    | 切换应用                    | function(value:any)             |
-| handleTabDelete   | 删除应用                    | function(value:any)             |
-| changeInnerPage   | 切换内置页面                | function(value:any)             |
-| searchToPage      | 搜索-选中菜单跳转           | function(value:any)             |
-| clearSearchList   | 搜索-清空历史记录           | void                            |
-| deleteSearchItem  | 搜索-删除指定的历史记录     | function(value:any)             |
-| userCommandHandle | 用户信息-操作项             | function(value:any)             |
-| changeTreeHandle  | 项目树-是否确定切换选中项目 | function(status:bool,value:any) |
-
-## das-ce-menu 使用方法
-
-1. **引入 `das-ce-menu` 组件并注册**。
-
-```js
-import { createCeMenu } from '@das-fed/web-components'
-createCeMenu('das-ce-menu')
-```
-
-2. **使用**。
-
-```html
-<das-ce-menu
-  :data="menuData"
-  :modelValue.prop="currentVal"
-  @update:modelValue="(event) => (currentVal = event.detail[0])"
-  :collapse.prop="collapse"
-  @change="onChange"
-  @collapse-change="onCollapseChange"
-></das-ce-menu>
-```
-
-3. **属性**
-
-| 属性名     | 描述               | 类型          | 默认值 | 是否必填 |
-| ---------- | ------------------ | ------------- | ------ | -------- |
-| modelValue | 当前选中菜单       | string/number | -      | 是       |
-| data       | 导航栏配置         | array         | []     | 是       |
-| collapse   | 菜单栏初始折叠状态 | boolean       | false  | 否       |
-
-4. **事件**
-
-| 事件            | 描述             | 回调参数                                    |
-| --------------- | ---------------- | ------------------------------------------- |
-| change          | 选中项改变触发   | function(value: string/number, option: any) |
-| collapse-change | 折叠状态改变触发 | function(value:boolean)                     |
-
-5. **方法**
-
-| 方法           | 描述         | 参数                           |
-| -------------- | ------------ | ------------------------------ |
-| changeCollapse | 切换折叠状态 | 接收一个布尔类型参数：折叠状态 |
+## das-ce-tabs 使用方法
+
+1. **引入 `das-ce-tabs` 组件并注册**。
+
+```js
+import { createCeTabs } from '@das-fed/web-components'
+createCeTabs('das-ce-tabs')
+```
+
+2. **定义 `options` 和 `modelValue` 属性**。
+
+`das-ce-tabs` 接收 `options` 和 `modelValue` 属性，`options` 属性配置如下：
+
+```js
+interface TabOption {
+  /** 唯一标识 */
+  key: string | number
+  /** 选项卡头显示文字 */
+  tab: string
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 是否隐藏 */
+  hidden?: boolean
+  /** 被隐藏时是否渲染 DOM 结构 */
+  forceRender?: boolean
+  /** tab显示文字插槽 */
+  tabSlot?: string
+  /** 关闭图标插槽 */
+  closeIconSlot?: string
+  /** 显示内容插槽 */
+  contentSlot?: string
+}
+```
+
+定义实例如下：
+
+```js
+const activeKey = ref(1)
+
+const options = ref([
+  { key: 1, tab: 'Tab 1' },
+  { key: 2, tab: 'Tab 2', disabled: true },
+  { key: 3, tab: 'Tab 3' },
+])
+```
+
+3. **监听组件事件**
+
+使用组件时，监听到的事件对象为 `customEvent` ，该对象中的 `detail` 属性是个数组，数组元素为组件事件的返回值。 `das-ce-tabs` 组件暴露了以下事件：
+
+1. `update:modelValue`：当 `modelValue` 属性变化时触发，要实现切换页签时 `activeKey` 属性自动变化，需要监听该事件。
+
+```js
+import { ref } from 'vue'
+import { createCeTabs } from '@das-fed/web-/components'
+createCeTabs('das-ce-tabs')
+
+const activeKey = ref(1)
+
+const options = ref([
+  { key: 1, tab: 'Tab 1' },
+  { key: 2, tab: 'Tab 2', disabled: true },
+  { key: 3, tab: 'Tab 3' },
+])
+```
+
+```html
+<das-ce-tabs
+  :modelValue="activeKey"
+  :options="options"
+  @update:modelValue="(customEvent) => (activeKey = customEvent.detail[0])"
+></das-ce-tabs>
+```
+
+2. `tabClick`：当 `tab` 被点击时触发。返回被点击页签的 `key` 值。
+
+```js
+import { ref } from 'vue'
+import { createCeTabs } from '@das-fed/web-components/components'
+createCeTabs('das-ce-tabs')
+
+const activeKey = ref(1)
+
+const options = ref([
+  { key: 1, tab: 'Tab 1' },
+  { key: 2, tab: 'Tab 2', disabled: true },
+  { key: 3, tab: 'Tab 3' },
+])
+
+const tabClick = (customEvent) => {
+  console.log('当前点击页签的key: ', customEvent.detail[0])
+}
+```
+
+```html
+<das-ce-tabs :modelValue="activeKey" :options="options" @tabClick="tabClick"></das-ce-tabs>
+```
+
+3. `tabDelete`：当 `tab` 被删除时触发。返回被删除页签的 `key` 值。
+
+```js
+import { ref } from 'vue'
+import { createCeTabs } from '@das-fed/web-components/components'
+createCeTabs('das-ce-tabs')
+
+const activeKey = ref(1)
+
+const options = ref([
+  { key: 1, tab: 'Tab 1' },
+  { key: 2, tab: 'Tab 2', disabled: true },
+  { key: 3, tab: 'Tab 3' },
+])
+
+const tabDelete = (customEvent) => {
+  console.log('当前删除页签的key：', customEvent.detail[0])
+}
+```
+
+```html
+<das-ce-tabs :modelValue="activeKey" :options="options" @tabDelete="tabDelete"></das-ce-tabs>
+```
+
+4. `menuClick`：当右键呼出的操作项选中时触发。返回被选中的操作项和当前右键操作的页签对象。
+
+```js
+import { ref } from 'vue'
+import { createCeTabs } from '@das-fed/web-components/components'
+createCeTabs('das-ce-tabs')
+
+const activeKey = ref(1)
+
+const options = ref([
+  { key: 1, tab: 'Tab 1' },
+  { key: 2, tab: 'Tab 2', disabled: true },
+  { key: 3, tab: 'Tab 3' },
+])
+
+const menuClick = (customEvent) => {
+  console.log('当前选中操作项：', customEvent.detail[0], '当前页签对象：', customEvent.detail[1])
+}
+```
+
+```html
+<das-ce-tabs :modelValue="activeKey" :options="options" @menuClick="menuClick"></das-ce-tabs>
+```
+
+操作项定义如下：
+
+```js
+interface MenuListType {
+  /** 唯一标识 */
+  key: string | number
+  /** 操作项名称 */
+  name: string
+  /** 是否隐藏 */
+  hidden?: boolean | Function
+  /** 是否禁用 */
+  disabled?: boolean | Function
+}
+```
+
+5. `pageRefresh`: 当点击右侧刷新按钮时触发。无返回值。
+
+```js
+import { ref } from 'vue'
+import { createCeTabs } from '@das-fed/web-components/components'
+createCeTabs('das-ce-tabs')
+
+const activeKey = ref(1)
+
+const options = ref([
+  { key: 1, tab: 'Tab 1' },
+  { key: 2, tab: 'Tab 2', disabled: true },
+  { key: 3, tab: 'Tab 3' },
+])
+
+const pageRefresh = () => {
+  console.log('刷新')
+}
+```
+
+```html
+<das-ce-tabs :modelValue="activeKey" :options="options" @pageRefresh="pageRefresh"></das-ce-tabs>
+```
+
+6. `toggleFullScreen`: 切换全屏状态。无返回值。
+
+```js
+import { ref } from 'vue'
+import { createCeTabs } from '@das-fed/web-components/components'
+createCeTabs('das-ce-tabs')
+
+const activeKey = ref(1)
+
+const options = ref([
+  { key: 1, tab: 'Tab 1' },
+  { key: 2, tab: 'Tab 2', disabled: true },
+  { key: 3, tab: 'Tab 3' },
+])
+
+const toggleFullScreen = () => {
+  console.log('全屏')
+}
+```
+
+```html
+<das-ce-tabs :modelValue="activeKey" :options="options" @toggleFullScreen="toggleFullScreen"></das-ce-tabs>
+```
+
+## das-ce-nav 使用方法
+
+### 1. **引入 `das-ce-nav` 组件并注册**。
+
+```js
+import { createCeNav } from '@das-fed/web-components'
+createCeNav('das-ce-nav')
+```
+
+#### ① 在 vue 文件中使用
+
+```html
+<das-ce-nav
+  @update:modelValue="(event) => (activeKey = event.detail[0])"
+  :modelValue="activeKey"
+  @handleTabClick="handleTabClick"
+  @handleTabDelete="handleTabDelete"
+  :config="config"
+  :logoUrl="logoUrl"
+  :searchConfig="searchConfig"
+  @searchToPage="searchToPage"
+  @clearSearchList="clearSearchList"
+  @deleteSearchItem="deleteSearchItem"
+  :userInfoConfig="userInfoConfig"
+  @userCommandHandle="userCommandHandle"
+  :projectTreeConfig="projectTreeConfig"
+  @changeTreeHandle="changeTreeHandle"
+  :innerPagesConfig="innerPagesConfig"
+  @changeInnerPage="changeInnerPage"
+></das-ce-nav>
+```
+
+#### ① 在 html 文件中使用
+
+```html
+<head>
+  <script type="module">
+    import { createCeNav } from '@das-fed/web-components'
+    createCeNav('das-ce-nav')
+    const handleTabClick = (event) => {
+      console.log(event)
+    }
+    const dasceNavEle = document.getElementsByTagName('das-ce-nav')[0]
+    dasceNavEle.addEventListener('handleTabClick', handleTabClick)
+  </script>
+</head>
+<body>
+  <das-ce-nav
+    @update:modelValue="(event) => (activeKey = event.detail[0])"
+    :modelValue="activeKey"
+    :config="config"
+    :logoUrl="logoUrl"
+    :searchConfig="searchConfig"
+    :userInfoConfig="userInfoConfig"
+    :projectTreeConfig="projectTreeConfig"
+    :innerPagesConfig="innerPagesConfig"
+  ></das-ce-nav>
+</body>
+```
+
+### 2. **属性**
+
+| 属性名            | 描述          | 类型                                      | 默认值                                    | 是否必填 |
+| ----------------- | ------------- | ----------------------------------------- | ----------------------------------------- | -------- |
+| modelValue        | 当前选中菜单  | string/number                             | -                                         | 是       |
+| config            | 导航栏配置    | [config](###config)                       | [config](###config)                       | 是       |
+| logoUrl           | logo 图片链接 | string                                    | -                                         | 否       |
+| innerPagesConfig  | 内置页面配置  | [innerPagesConfig](###innerPagesConfig)   | [innerPagesConfig](###innerPagesConfig)   | 否       |
+| searchConfig      | 搜索配置      | [searchConfig](###searchConfig)           | [searchConfig](###searchConfig)           | 否       |
+| userInfoConfig    | 用户信息配置  | [userInfoConfig](###userInfoConfig)       | [userInfoConfig](###userInfoConfig)       | 否       |
+| projectTreeConfig | 项目树配置    | [projectTreeConfig](###projectTreeConfig) | [projectTreeConfig](###projectTreeConfig) | 否       |
+
+### config
+
+| 属性名          | 描述               | 类型                               | 默认值 | 是否必填 |
+| --------------- | ------------------ | ---------------------------------- | ------ | -------- |
+| showSearch      | 是否显示搜索       | bool                               | false  | 否       |
+| showProjectTree | 是否显示项目下拉树 | bool                               | false  | 否       |
+| subAppList      | 导航栏菜单数据     | {name:string,code:string/number}[] | -      | 否       |
+
+### innerPagesConfig
+
+| 属性名              | 描述               | 类型                            | 默认值 | 是否必填 |
+| ------------------- | ------------------ | ------------------------------- | ------ | -------- |
+| activeInnerPagePath | 内置菜单当前选中值 | string/number                   | false  | 否       |
+| innerPages          | 内置菜单数据       | {title: string, path: string}[] | false  | 否       |
+
+### searchConfig
+
+| 属性名         | 描述             | 类型                          | 默认值                      | 是否必填 |
+| -------------- | ---------------- | ----------------------------- | --------------------------- | -------- |
+| defaultProps   | -                | {value: string,label: string} | {value: 'id',label: 'name'} | 否       |
+| getHistoryList | 获取历史搜索记录 | () => Promise<any>            | -                           | 否       |
+| getSearchList  | 获取菜单         | () => Promise<any>            | -                           | 否       |
+| addHistory     | 添加历史记录     | (data:any) => void            | -                           | 否       |
+
+### userInfoConfig
+
+| 属性名        | 描述           | 类型                                               | 默认值 | 是否必填 |
+| ------------- | -------------- | -------------------------------------------------- | ------ | -------- |
+| headPicture   | 用户头像       | 默认头像                                           | 否     |
+| commandList   | 用户信息操作项 | () => Promise<any>                                 | -      | 否       |
+| getSearchList | 获取菜单       | {value?: string /number,label?: string / number}[] | -      | 否       |
+
+### projectTreeConfig
+
+| 属性名              | 描述                               | 类型                                                               | 默认值                      | 是否必填 |
+| ------------------- | ---------------------------------- | ------------------------------------------------------------------ | --------------------------- | -------- |
+| projectStore        | 项目数据                           | -                                                                  | 否                          |
+| defaultProps        | -                                  | {value: string,label: string}                                      | {value: 'id',label: 'name'} | 否       |
+| treeProps           | 树组件配置                         | [TreeOptionProps](###TreeOptionProps)                              | -                           | 否       |
+| filterNode          | 搜索过滤                           | (value: any, data: any) => [projectTreeType](###projectTreeType)[] | -                           | 否       |
+| filterFlatCondition | 树切换平铺，符合条件的加入平铺列表 | (data: any) => boolean[]                                           | -                           | 否       |
+
+### TreeOptionProps
+
+```js
+interface TreeOptionProps {
+  label?: string // 默认name
+  pathName?: string // 默认pathName
+  children?: string // 默认children
+  parentId?: string // 默认parentId
+  disabled?: string | ((data: TreeNodeData, node?: Node) => boolean) // 默认disabled
+  isLeaf?: string | ((data: TreeNodeData, node?: Node) => boolean) // 默认leaf;懒加载不支持方法
+  // 允许取消选中（keepSelected为true时生效）
+  allowUnSelect?: string | ((data: TreeNodeData) => boolean) // 默认allowUnSelect
+  class?: (
+    data: TreeNodeData,
+    node: Node,
+  ) =>
+    | string
+    | {
+        [key: string]: boolean
+      }
+    | string
+}
+```
+
+### projectTreeType
+
+| 属性名   | 描述                                       | 类型                                  | 默认值 | 是否必填 |
+| -------- | ------------------------------------------ | ------------------------------------- | ------ | -------- |
+| -        | 唯一标识（可使用 defaultProps.value 配置） | id                                    | 是     |
+| -        | 项目名称（可使用 defaultProps.label 配置） | name                                  | 是     |
+| children | 树组件配置                                 | [projectTreeType](###projectTreeType) | -      | 否       |
+
+### 3. **事件**
+
+| 事件              | 说明                        | 回调参数                        |
+| ----------------- | --------------------------- | ------------------------------- |
+| handleTabClick    | 切换应用                    | function(value:any)             |
+| handleTabDelete   | 删除应用                    | function(value:any)             |
+| changeInnerPage   | 切换内置页面                | function(value:any)             |
+| searchToPage      | 搜索-选中菜单跳转           | function(value:any)             |
+| clearSearchList   | 搜索-清空历史记录           | void                            |
+| deleteSearchItem  | 搜索-删除指定的历史记录     | function(value:any)             |
+| userCommandHandle | 用户信息-操作项             | function(value:any)             |
+| changeTreeHandle  | 项目树-是否确定切换选中项目 | function(status:bool,value:any) |
+
+## das-ce-menu 使用方法
+
+1. **引入 `das-ce-menu` 组件并注册**。
+
+```js
+import { createCeMenu } from '@das-fed/web-components'
+createCeMenu('das-ce-menu')
+```
+
+2. **使用**。
+
+```html
+<das-ce-menu
+  :data="menuData"
+  :modelValue.prop="currentVal"
+  @update:modelValue="(event) => (currentVal = event.detail[0])"
+  :collapse.prop="collapse"
+  @change="onChange"
+  @collapse-change="onCollapseChange"
+></das-ce-menu>
+```
+
+3. **属性**
+
+| 属性名     | 描述               | 类型          | 默认值 | 是否必填 |
+| ---------- | ------------------ | ------------- | ------ | -------- |
+| modelValue | 当前选中菜单       | string/number | -      | 是       |
+| data       | 导航栏配置         | array         | []     | 是       |
+| collapse   | 菜单栏初始折叠状态 | boolean       | false  | 否       |
+
+4. **事件**
+
+| 事件            | 描述             | 回调参数                                    |
+| --------------- | ---------------- | ------------------------------------------- |
+| change          | 选中项改变触发   | function(value: string/number, option: any) |
+| collapse-change | 折叠状态改变触发 | function(value:boolean)                     |
+
+5. **方法**
+
+| 方法           | 描述         | 参数                           |
+| -------------- | ------------ | ------------------------------ |
+| changeCollapse | 切换折叠状态 | 接收一个布尔类型参数：折叠状态 |