@ibiz-template/vue3-components v0.7.41-alpha.2

@ibiz-template/vue3-components

web端基于vue3和element-plus实现的界面组件，包含视图组件、部件组件、编辑器组件、面板项组件、通用vue组件、web端视图引擎、路由、应用构建等组件。

📂 项目结构

├── src
│   ├── common                                                  公共组件
│   │   ├── action-toolbar                                      行为工具栏
│   │   ├── anchor-container                                    锚点容器
│   │   │   ├── anchor-bar-list                                 锚点工具栏
│   │   ├── button-list                                         按钮组
│   │   ├── carousel                                            轮播
│   │   ├── carousel-card                                       轮播-卡片
│   │   ├── col                                                 布局组件-列
│   │   ├── control-navigation                                  部件内容导航组件
│   │   ├── coop-alert                                          消息提示组件
│   │   ├── cropping                                            裁剪框组件
│   │   ├── custom-filter-condition                             自定义查询条件组件
│   │   ├── custom-theme                                        自定义主题组件
│   │   ├── data-import                                         数据导入
│   │   ├── data-import2                                        数据导入2
│   │   ├── data-import2-select                                 数据导入2-下拉模式
│   │   ├── data-import2-table                                  数据导入2-表格模式
│   │   ├── doing-notice                                        待办消息通知组件
│   │   ├── emoji-select                                        表情选择组件
│   │   ├── extend-action-timeline                              扩展时间线
│   │   ├── fullscreen-toolbar                                  全屏工具栏
│   │   ├── gantt-setting                                       甘特图设置组件
│   │   ├── grid-setting                                        表格设置组件
│   │   ├── index.ts                                            公共组件注册文件
│   │   ├── map-chart                                           地图图表
│   │   ├── map-chart-user                                      地图图表-用户样式1
│   │   ├── nav-split                                           导航分割面板组件
│   │   ├── no-data                                             无数据组件
│   │   ├── pagination                                          分页栏组件
│   │   ├── pql-editor                                          PQL编辑器
│   │   ├── quick-edit                                          打开编辑组件
│   │   ├── rawitem                                             直接内容组件
│   │   ├── row                                                 布局组件-行
│   │   ├── sort-bar                                            排序组件
│   │   ├── split                                               分割面板
│   │   ├── split-trigger                                       分割面板线
│   │   └── view-message                                        视图消息组件
│   ├── control                                                 部件组件
│   │   ├── app-menu                                            应用菜单
│   │   ├── app-menu-icon-view                                  应用菜单-快捷菜单
│   │   ├── calendar                                            日历
│   │   ├── caption-bar                                         视图标题栏
│   │   ├── chart                                               图表
│   │   ├── context-menu                                        上下文菜单
│   │   ├── dashboard                                           门户看板
│   │   ├── data-view                                           数据视图
│   │   ├── drbar                                               关系栏组件
│   │   ├── drtab                                               关系分页组件
│   │   ├── exp-bar                                             导航栏
│   │   │   ├── calendar-exp-bar                                日历导航栏
│   │   │   ├── chart-exp-bar                                   图表导航栏
│   │   │   ├── data-view-exp-bar                               数据视图导航栏
│   │   │   ├── grid-exp-bar                                    表格导航栏
│   │   │   ├── list-exp-bar                                    列表导航栏
│   │   │   └── tree-exp-bar                                    树导航栏
│   │   ├── form                                                表单
│   │   │   ├── edit-form                                       编辑表单
│   │   │   ├── form                                            表单
│   │   │   ├── form-detail                                     表单详情
│   │   │   │   ├── form-button                                 表单按钮
│   │   │   │   ├── form-button-list                            表单按钮组
│   │   │   │   ├── form-druipart                               表单关系界面
│   │   │   │   ├── form-group-panel                            表单分组面板
│   │   │   │   ├── form-item                                   表单项
│   │   │   │   ├── form-mdctrl                                 表单多数据部件
│   │   │   │   ├── form-page                                   表单页面
│   │   │   │   ├── form-rawitem                                表单直
│   │   │   │   ├── form-tab-page                               表单页面
│   │   │   │   ├── form-tab-panel                              表单分组面板
│   │   │   └── search-form                                     搜索表单
│   │   ├── gantt                                               甘特图
│   │   ├── grid                                                表格
│   │   │   ├── grid                                            表格
│   │   │   ├── grid-column                                     表格列
│   │   │   │   ├── grid-field-column                           表格属性列
│   │   │   │   ├── grid-field-edit-column                      表格编辑列
│   │   │   │   ├── grid-group-column                           表格分组列
│   │   │   │   ├── grid-ua-column                              表格操作列
│   │   │   └── row-edit-popover                                表格行编辑气泡
│   │   ├── kanban                                              看板
│   │   ├── list                                                列表
│   │   ├── map                                                 地图
│   │   ├── medit-view-panel                                    多表单编辑视图面板
│   │   ├── pickup-view-panel                                   选择视面板班
│   │   ├── report-panel                                        报表面面板
│   │   │   ├── report-detail                                   报表详情
│   │   │   │   ├── bi-report-panel                             bi报表面板
│   │   │   │   ├── user-report-panel                           用户样式1报表面板
│   │   │   │   └── user2-report-panel                          用户样式2报表面板
│   │   ├── search-bar                                          搜索栏
│   │   │   ├── filter-mode-select                              下拉模式选择
│   │   │   ├── filter-tree                                     搜索条件数树树
│   │   │   ├── quick-search-select                             快速搜索选择
│   │   │   └── search-groups                                   搜索组
│   │   ├── tab-exp-panel                                       分页导航面板
│   │   ├── toolbar                                             工具栏
│   │   ├── tree                                                树
│   │   ├── tree-grid                                           树形表格
│   │   ├── tree-grid-ex                                        树形表格-增强
│   │   │   ├── tree-grid-ex-column                             树形表格-增强-扩展列
│   │   │   │   ├── tree-grid-ex-edit-column                    树形表格-增强-编辑列
│   │   │   │   ├── tree-grid-ex-field-column                   树形表格-增强-字段列
│   │   │   │   └── tree-grid-ex-ua-column                      树形表格-增强-属性列
│   ├── editor                                                  编辑器
│   │   ├── array                                               数组编辑器
│   │   ├── autocomplete                                        自动填充
│   │   ├── carousel                                            轮播图
│   │   ├── cascader                                            级联选择器
│   │   ├── check-box                                           选项框
│   │   ├── check-box-list                                      多选框列表
│   │   ├── code                                                代码框编辑器
│   │   ├── color-picker                                        颜色选择器
│   │   ├── data-picker                                         数据选择
│   │   │   ├── ibiz-mpicker                                    地址框
│   │   │   ├── ibiz-picker                                     数据选择器单选
│   │   │   ├── ibiz-picker-dropdown                            数据选择器-下拉
│   │   │   ├── ibiz-picker-embed-view                          数据选择器-嵌入视图
│   │   │   ├── ibiz-picker-link                                数据选择器-链接
│   │   │   ├── ibiz-picker-select-view                         数据选择器-下拉视图
│   │   ├── date-picker                                         日期选择器
│   │   ├── date-range                                          日期范围选择器
│   │   ├── date-range-select                                   日期范围选择器-指定类型（天，周，月，季度，年）
│   │   ├── dropdown-list                                       下拉列表
│   │   ├── html                                                富文本编辑器
│   │   ├── list-box                                            选项列表框
│   │   ├── markdown                                            markdown
│   │   ├── not-supported-editor                                不支持的编辑器
│   │   ├── number-range                                        数值范围
│   │   ├── preset                                              预设直接内容编辑器
│   │   ├── radio-button-list                                   单选按钮列表
│   │   ├── rate                                                评分器
│   │   ├── raw                                                 直接内容
│   │   ├── slider                                              滑动条
│   │   ├── span                                                标签
│   │   ├── stepper                                             步进器
│   │   ├── switch                                              开关
│   │   ├── text-box                                            文本框
│   │   ├── upload                                              文件上传
│   │   └── user
│   │       ├── ibiz-searchcond-edit                            searchcond编辑器
│   ├── ibiz-vue3.ts                                            vue3组件挂载文件
│   ├── index.ts                                                组件导出文件
│   ├── interface                                               接口
│   ├── locale                                                  国际化
│   │   ├── en                                                  国际化-英文
│   │   └── zh-CN                                               国际化-中文
│   ├── panel-component                                         面板组件
│   │   ├── auth-captcha                                        人机识别组件
│   │   ├── auth-sso                                            第三方登录组件
│   │   ├── auth-userinfo                                       用户信息
│   │   ├── coop-pos                                            协同消息占位
│   │   ├── data-import                                         数据导入
│   │   ├── index-actions                                       首页行为操作
│   │   ├── nav-breadcrumb                                      导航面包屑
│   │   ├── nav-pos-index                                       首页导航占位
│   │   ├── nav-tabs                                            导航分页栏
│   │   ├── panel-app-header                                    面板-应用头部
│   │   ├── panel-app-login-view                                面板-应用登录视图
│   │   ├── panel-app-title                                     面板-应用标题
│   │   ├── panel-button                                        面板-按钮
│   │   ├── panel-button-list                                   面板-按钮组
│   │   ├── panel-exp-header                                    面板-导航头部
│   │   ├── panel-index-view-search                             面板-首页搜索框
│   │   ├── panel-remember-me                                   面板-登录页记住我
│   │   ├── panel-static-carousel                               面板--静态轮播图
│   │   ├── panel-tab-panel                                     面板-分页面板
│   │   ├── panel-view-content                                  面板-视图内容区
│   │   ├── panel-view-header                                   面板-视图头部区
│   │   ├── searchform-buttons                                  面板-搜索表单-按钮
│   │   ├── short-cut                                           面板-缩放快捷工具栏
│   │   ├── split-container                                     面板-分割容器
│   │   ├── user-action                                         面板-首页用户操作
│   │   ├── user-message                                        面板-首页用户消息
│   ├── shims-vue.d.ts                                          vue类型定义文件
│   ├── util                                                    UI工具类
│   │   ├── ai-util                                             ai工具类
│   │   ├── app-drawer                                          抽屉
│   │   ├── app-float-window                                    悬浮窗
│   │   ├── app-modal                                           模态框
│   │   ├── app-popover                                         气泡框
│   │   ├── app-util                                            工具方法文件，提供登录，登出，更改密码，切换主题，打开AI框等方法
│   │   ├── confirm-util                                        确认框
│   │   ├── fullscreen                                          全屏工具类
│   │   ├── keydown-util                                        提供enter键自动聚集某元素的方法
│   │   ├── loading-util                                        全局加载动画工具
│   │   ├── message-util                                        消息通知
│   │   ├── modal-util                                          简洁确认操作框
│   │   ├── notice-util                                         通知提示框
│   │   ├── notification-util                                   消息通知工具（界面右上角显示可关闭的全局通知）
│   │   ├── open-view-util                                      打开视图方式工具类
│   │   ├── overlay-controller                                  组件绘制工具，可指定组件的绘制形式（气泡，模态，抽屉，飘窗）
│   │   ├── pagination                                          分页组件使用方法
│   │   ├── render-util                                         绘制工具类（包含逻辑中绘制视图、绘制部件等功能）
│   │   ├── wang-editor-util                                    表情解析方法
│   │   └── xlsx-util                                           excel文件操作工具类
│   ├── view
│   │   ├── 403-view                                            403页面
│   │   ├── 404-view                                            404页面
│   │   ├── error-view                                          错误页
│   │   ├── index.ts                                            视图页导出文件
│   │   ├── login-view                                          登录页面
│   │   ├── share-view                                          分享页面
│   │   ├── sub-app-ref-view                                    子应用引用视图
│   │   └── wf-step-trace-view                                  流程跟踪视图
│   ├── view-engine                                             视图引擎
│   │   ├── app-data-upload-view.engine.ts                      应用数据上传视图引擎
│   │   ├── calendar-exp-view.engine.ts                         日历导航视图引擎
│   │   ├── calendar-view.engine.ts                             日历视图引擎
│   │   ├── chart-exp-view.engine.ts                            图表导航视图引擎
│   │   ├── chart-view.engine.ts                                图表视图引擎
│   │   ├── custom-view.engine.ts                               自定义视图引擎
│   │   ├── data-view-exp-view.engine.ts                        数据卡片导航视图引擎
│   │   ├── data-view.engine.ts                                 数据视图引擎
│   │   ├── de-index-view-engine.ts                             实体首页视图引擎
│   │   ├── edit-view.engine.ts                                 编辑视图引擎
│   │   ├── edit-view2.engine.ts                                编辑视图2（左右关系）引擎
│   │   ├── edit-view3.engine.ts                                编辑视图3（分页关系）引擎
│   │   ├── edit-view4.engine.ts                                编辑视图4（上下关系）引擎
│   │   ├── exp-view.engine.ts                                  导航视图引擎基类
│   │   ├── form-pickup-data-view.engine.ts                     表单选择数据视图引擎
│   │   ├── gantt-view.engine.ts                                甘特视图引擎
│   │   ├── grid-exp-view.engine.ts                             表格导航视图引擎
│   │   ├── grid-view.engine.ts                                 表格视图引擎
│   │   ├── index-view.engine.ts                                首页视图引擎
│   │   ├── index.ts                                            视图引擎导出文件
│   │   ├── kanban-view.engine.ts                               看板视图引擎
│   │   ├── list-exp-view.engine.ts                             列表导航视图引擎
│   │   ├── list-view.engine.ts                                 列表视图引擎
│   │   ├── login-view.engine.ts                                登录视图引擎
│   │   ├── map-view.engine.ts                                  地图视图引擎
│   │   ├── medit-view9.engine.ts                               多表单编辑视图引擎
│   │   ├── mpickup-view-engine.ts                              多数据选择视图引擎
│   │   ├── mpickup-view2-engine.ts                             多数据选择视图（左右关系）引擎
│   │   ├── opt-view.engine.ts                                  选项操作视图引擎
│   │   ├── panel-view-engine.ts                                面板视图引擎
│   │   ├── pickup-data-view.engine.ts                          选择数据视图引擎
│   │   ├── pickup-grid-view.engine.ts                          选择表格视图引擎
│   │   ├── pickup-tree-view.engine.ts                          选择树视图引擎
│   │   ├── pickup-view.engine.ts                               选择视图引擎
│   │   ├── pickup-view2.engine.ts                              选择视图（左右关系）引擎
│   │   ├── portal-view-engine.ts                               门户视图引擎
│   │   ├── report-view.engine.ts                               报表视图引擎
│   │   ├── sub-app-ref-view.engine.ts                          子应用引用视图引擎
│   │   ├── tab-exp-view.engine.ts                              分页导航视图引擎
│   │   ├── tab-search-view.engine.ts                           分页搜索视图引擎
│   │   ├── tree-exp-view.engine.ts                             树导航视图引擎
│   │   ├── tree-grid-ex-view.engine.ts                         树表格增强视图引擎
│   │   ├── tree-grid-view.engine.ts                            树表格视图引擎
│   │   ├── tree-view.engine.ts                                 树视图引擎
│   │   ├── wf-dyna-action-view.engine.ts                       工作流动态操作视图引擎
│   │   ├── wf-dyna-edit-view.engine.ts                         工作流动态编辑视图
│   │   ├── wf-dyna-edit-view3.engine.ts                        工作流动态编辑视图3
│   │   ├── wf-dyna-start-view.engine.ts                        工作流动态启动视图
│   │   ├── wf-step-data-view.engine.ts                         流程处理记录视图引擎
│   │   └── wizard-view-engine.ts                               向导视图引擎
│   └── web-app
│       ├── App.scss                                            App组件样式文件
│       ├── App.tsx                                             App组件
│       ├── attach-environment-config.ts                        环境配置
│       ├── components
│       │   ├── modal-router-shell                              路由模态壳
│       │   └── router-shell                                    路由壳
│       ├── create-vue-app.ts                                   创建vue3实例
│       ├── guard                                               路由守卫
│       ├── index.ts                                            路由，权限，组件挂载方法导出文件
│       ├── main.ts                                             入口文件
│       ├── router                                              路由
│       └── util
│           └── unauthorized-handler                            无权限登录处理

📦 开发

1. 安装依赖

进入 @ibiz-template/vue3-components 工作空间后，执行以下命令安装依赖：

pnpm i

2. 链接依赖项目

终端执行 shell 脚本：./scripts/link.sh ，该脚本会将该包中用到ibiz-template下的几个包 link 到本包内：

./scripts/link.sh

3. 运行项目

执行以下命令运行当前项目：

pnpm dev

4. 链接到全局

执行以下命令链接到全局，供主项目使用：

pnpm link --global

📌 更改日志

每个版本的详细更改记录在发行说明中。

📜 许可证

MIT