@das-fed/web-components 7.1.0-dev.18 → 7.1.0-dev.19

package/README.md

@@ -1,167 +1,167 @@
-# das-web-components 组件库说明文档
-
-## 一、简介
-
-das-web-components 是 DAS 前端体系的 Web 组件库，基于 Web Components 技术，支持 Vue、React、原生 JS 等多种框架集成，适用于企业级中后台系统的统一架构和快速开发。
-
----
-
-## 二、核心组件与用法
-
-### 1. das-ce-tabs 页签组件
-
-- 支持动态页签、右键菜单、刷新、全屏等功能。
-- 通过 `createCeTabs('das-ce-tabs')` 注册。
-- 主要属性：
-  - `options`：页签配置数组，支持禁用、隐藏、插槽等。
-  - `modelValue`：当前激活页签 key。
-- 主要事件：
-  - `update:modelValue`：切换页签时触发，返回新激活 key。
-  - `tabClick`：点击页签时触发，返回 key。
-  - `tabDelete`：删除页签时触发，返回 key。
-  - `menuClick`：右键菜单操作，返回操作项和页签对象。
-  - `pageRefresh`：点击刷新按钮时触发。
-  - `toggleFullScreen`：切换全屏。
-- 主要方法与类型定义见下方代码示例。
-
-#### 用法示例
-
-```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" @menuClick="menuClick"></das-ce-tabs>
-```
-
-#### 事件与类型
-
-```js
-interface MenuListType {
-  key: string | number
-  name: string
-  hidden?: boolean | Function
-  disabled?: boolean | Function
-}
-```
-
----
-
-### 2. das-ce-nav 顶部导航栏组件
-
-- 支持菜单、logo、搜索、用户信息、项目树、内置页面等多种功能。
-- 通过 `createCeNav('das-ce-nav')` 注册。
-- 主要属性：
-  - `modelValue`：当前选中菜单 key。
-  - `config`：导航栏配置。
-  - `logoUrl`、`searchConfig`、`userInfoConfig`、`projectTreeConfig`、`innerPagesConfig` 等。
-- 主要事件：
-  - `handleTabClick`、`handleTabDelete`、`changeInnerPage`、`searchToPage`、`clearSearchList`、`deleteSearchItem`、`userCommandHandle`、`changeTreeHandle`。
-- 详细属性与事件见下方表格。
-
-#### 用法示例
-
-```js
-import { createCeNav } from '@das-fed/web-components'
-createCeNav('das-ce-nav')
-```
-
-```html
-<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>
-```
-
-#### 主要属性与事件
-
-| 属性名            | 描述          | 类型          | 是否必填 |
-| ----------------- | ------------- | ------------- | -------- |
-| modelValue        | 当前选中菜单  | string/number | 是       |
-| config            | 导航栏配置    | object        | 是       |
-| logoUrl           | logo 图片链接 | string        | 否       |
-| innerPagesConfig  | 内置页面配置  | object        | 否       |
-| searchConfig      | 搜索配置      | object        | 否       |
-| userInfoConfig    | 用户信息配置  | object        | 否       |
-| projectTreeConfig | 项目树配置    | object        | 否       |
-
-| 事件              | 说明                        | 回调参数                        |
-| ----------------- | --------------------------- | ------------------------------- |
-| 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) |
-
----
-
-### 3. das-ce-menu 侧边菜单栏组件
-
-- 支持菜单折叠、选中、动态数据等功能。
-- 通过 `createCeMenu('das-ce-menu')` 注册。
-- 主要属性：
-  - `modelValue`：当前选中菜单 key。
-  - `data`：菜单数据数组。
-  - `collapse`：菜单栏初始折叠状态。
-- 主要事件：
-  - `change`：选中项改变时触发。
-  - `collapse-change`：菜单折叠状态改变时触发。
-- 主要方法：
-  - `changeCollapse`：切换菜单折叠状态。
-
-#### 用法示例
-
-```js
-import { createCeMenu } from '@das-fed/web-components'
-createCeMenu('das-ce-menu')
-```
-
-```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>
-```
-
----
-
-## 三、组件属性与类型定义
-
-详细属性、类型定义和事件请参考源码及注释。
-
----
-
-## 四、常见问题与扩展
-
-- 支持在 Vue、React、原生 JS 项目中直接注册和使用。
-- 组件事件均通过 `customEvent.detail` 获取返回值。
-- 支持自定义插槽、动态数据、复杂交互。
-- 推荐结合 DAS Web 主应用统一布局和微前端架构使用。
-
----
-
-## 五、贡献与维护
-
-如需详细 API 说明、组件开发指南，请参考源码及注释。
+# das-web-components 组件库说明文档
+
+## 一、简介
+
+das-web-components 是 DAS 前端体系的 Web 组件库，基于 Web Components 技术，支持 Vue、React、原生 JS 等多种框架集成，适用于企业级中后台系统的统一架构和快速开发。
+
+---
+
+## 二、核心组件与用法
+
+### 1. das-ce-tabs 页签组件
+
+- 支持动态页签、右键菜单、刷新、全屏等功能。
+- 通过 `createCeTabs('das-ce-tabs')` 注册。
+- 主要属性：
+  - `options`：页签配置数组，支持禁用、隐藏、插槽等。
+  - `modelValue`：当前激活页签 key。
+- 主要事件：
+  - `update:modelValue`：切换页签时触发，返回新激活 key。
+  - `tabClick`：点击页签时触发，返回 key。
+  - `tabDelete`：删除页签时触发，返回 key。
+  - `menuClick`：右键菜单操作，返回操作项和页签对象。
+  - `pageRefresh`：点击刷新按钮时触发。
+  - `toggleFullScreen`：切换全屏。
+- 主要方法与类型定义见下方代码示例。
+
+#### 用法示例
+
+```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" @menuClick="menuClick"></das-ce-tabs>
+```
+
+#### 事件与类型
+
+```js
+interface MenuListType {
+  key: string | number
+  name: string
+  hidden?: boolean | Function
+  disabled?: boolean | Function
+}
+```
+
+---
+
+### 2. das-ce-nav 顶部导航栏组件
+
+- 支持菜单、logo、搜索、用户信息、项目树、内置页面等多种功能。
+- 通过 `createCeNav('das-ce-nav')` 注册。
+- 主要属性：
+  - `modelValue`：当前选中菜单 key。
+  - `config`：导航栏配置。
+  - `logoUrl`、`searchConfig`、`userInfoConfig`、`projectTreeConfig`、`innerPagesConfig` 等。
+- 主要事件：
+  - `handleTabClick`、`handleTabDelete`、`changeInnerPage`、`searchToPage`、`clearSearchList`、`deleteSearchItem`、`userCommandHandle`、`changeTreeHandle`。
+- 详细属性与事件见下方表格。
+
+#### 用法示例
+
+```js
+import { createCeNav } from '@das-fed/web-components'
+createCeNav('das-ce-nav')
+```
+
+```html
+<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>
+```
+
+#### 主要属性与事件
+
+| 属性名            | 描述          | 类型          | 是否必填 |
+| ----------------- | ------------- | ------------- | -------- |
+| modelValue        | 当前选中菜单  | string/number | 是       |
+| config            | 导航栏配置    | object        | 是       |
+| logoUrl           | logo 图片链接 | string        | 否       |
+| innerPagesConfig  | 内置页面配置  | object        | 否       |
+| searchConfig      | 搜索配置      | object        | 否       |
+| userInfoConfig    | 用户信息配置  | object        | 否       |
+| projectTreeConfig | 项目树配置    | object        | 否       |
+
+| 事件              | 说明                        | 回调参数                        |
+| ----------------- | --------------------------- | ------------------------------- |
+| 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) |
+
+---
+
+### 3. das-ce-menu 侧边菜单栏组件
+
+- 支持菜单折叠、选中、动态数据等功能。
+- 通过 `createCeMenu('das-ce-menu')` 注册。
+- 主要属性：
+  - `modelValue`：当前选中菜单 key。
+  - `data`：菜单数据数组。
+  - `collapse`：菜单栏初始折叠状态。
+- 主要事件：
+  - `change`：选中项改变时触发。
+  - `collapse-change`：菜单折叠状态改变时触发。
+- 主要方法：
+  - `changeCollapse`：切换菜单折叠状态。
+
+#### 用法示例
+
+```js
+import { createCeMenu } from '@das-fed/web-components'
+createCeMenu('das-ce-menu')
+```
+
+```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>
+```
+
+---
+
+## 三、组件属性与类型定义
+
+详细属性、类型定义和事件请参考源码及注释。
+
+---
+
+## 四、常见问题与扩展
+
+- 支持在 Vue、React、原生 JS 项目中直接注册和使用。
+- 组件事件均通过 `customEvent.detail` 获取返回值。
+- 支持自定义插槽、动态数据、复杂交互。
+- 推荐结合 DAS Web 主应用统一布局和微前端架构使用。
+
+---
+
+## 五、贡献与维护
+
+如需详细 API 说明、组件开发指南，请参考源码及注释。