# ibiz-next-mob-vue3 **Repository Path**: iBizModeling/ibiz-next-mob-vue3 ## Basic Information - **Project Name**: ibiz-next-mob-vue3 - **Description**: 移动端基础 iBiz 基础组件包 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 6 - **Created**: 2023-06-12 - **Last Updated**: 2025-08-20 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # @ibiz-template/mob-vue3-components 移动端端基于vue3和vant实现的界面组件，包含视图组件、部件组件、编辑器组件、面板项组件、通用vue组件、web端视图引擎、路由、应用构建等组件。 ## 📂 项目结构 ``` ├── src │   ├── common 公共组件 │   │   ├── action-toolbar 行为工具栏 │   │   ├── button-list 按钮组 │   │   ├── carousel 轮播图片组件 │   │   ├── col 布局-列组件 │   │   ├── cropping 图片裁剪组件 │   │   ├── date-range-picker 日期范围选择组件 │   │   ├── emoji-select 表情选择组件 │   │   ├── fullscreen-header 全屏头部组件 │   │   ├── index.ts 公共组件注册文件 │   │   ├── keep-alive 缓存组件 │   │   ├── md-ctrl-setting 多数据部件设置组件 │   │   ├── no-data 无数据组件 │   │   ├── preset-view-back 预置视图返回按钮组件 │   │   ├── preset-view-header 预置视图头部组件 │   │   ├── preview-image 预览图片组件 │   │   ├── rawitem 直接内容组件 │   │   └── row 布局-行组件 │   ├── control 部件组件 │   │   ├── app-menu 应用菜单组件 │   │   │   ├── custom-menu-design 自定义菜单设计组件 │   │   ├── app-menu-icon-view 应用菜单图标视图组件 │   │   ├── app-menu-list-view 应用菜单列表视图组件 │   │   ├── calendar 日历组件 │   │   ├── caption-bar 标题栏组件 │   │   ├── chart 图表组件 │   │   ├── dashboard 门户看板组件 │   │   │   └── portlet │   │   │   ├── container-portlet 门户容器 │   │   │   ├── list-portlet 门户列表 │   │   │   ├── menu-portlet 门户菜单 │   │   │   ├── portlet-layout 门户布局 │   │   │   ├── portlet-part 门户控件状态 │   │   │   └── view-portlet 门户视图 │   │   ├── data-view 数据视图组件 │   │   ├── drbar 关系栏组件 │   │   ├── drtab 关系分页组件 │   │   ├── form 表单组件 │   │   │   ├── edit-form 编辑表单 │   │   │   ├── form 表单 │   │   │   ├── form-detail 表单详情 │   │   │   │   ├── form-button 表单按钮 │   │   │   │   ├── form-button-list 表单按钮组 │   │   │   │   ├── form-druipart 表单关系部件 │   │   │   │   ├── form-group-panel 表单分组面板 │   │   │   │   ├── form-item 表单项 │   │   │   │   │   ├── form-item-container 表单项容器 │   │   │   │   ├── form-mdctrl 表单多数据部件 │   │   │   │   │   ├── form-mdctrl-form 表单多数据部件-表单 │   │   │   │   │   ├── form-mdctrl-md 表单多数据部件-多数据部件 │   │   │   │   │   ├── form-mdctrl-repeater 表单多数据部件-重复器 │   │   │   │   │   │   ├── repeater-multi-form 表单多数据部件-重复器-多表单 │   │   │   │   │   │   └── repeater-single-form 表单多数据部件-重复器-单表单 │   │   │   │   │   └── mdctrl-container 表单多数据部件容器 │   │   │   │   ├── form-page 表单分页 │   │   │   │   ├── form-rawitem 表单直接内容 │   │   │   │   ├── form-tab-page 表单tab分页 │   │   │   │   └── form-tab-panel 表单tab分页面板 │   │   │   └── search-form 搜索表单 │   │   ├── index.ts 部件组件导出文件 │   │   ├── list 列表组件 │   │   │   ├── list 普通列表 │   │   │   └── md-ctrl 多数据部件 │   │   ├── pickup-view-panel 选择视图面板 │   │   ├── search-bar 搜索栏组件 │   │   ├── tab-exp-panel 分页导航面板 │   │   ├── toolbar 工具栏组件 │   │   ├── tree 树组件 │   │   ├── tree-exp-bar 树导航栏 │   │   └── wizard-panel 向导面板 │   ├── editor 编辑器组件 │   │   ├── cascader 级联选择器 │   │   ├── check-box 复选框 │   │   ├── check-box-list 选项列表框 │   │   ├── color-picker 颜色选择器 │   │   ├── common │   │   │   ├── data-mpicker 数据多选通用组件 │   │   │   └── right-icon 向右箭头图标 │   │   ├── data-picker 数据选择器 │   │   │   ├── ibiz-mpicker 数据多选组件 │   │   │   ├── ibiz-picker 数据选择组件 │   │   │   └── ibiz-picker-select-view 数据选择器-选择视图 │   │   ├── date-picker 日期选择器 │   │   ├── date-range 日期范围选择器 │   │   ├── dropdown-list 下拉列表 │   │   │   ├── ibiz-dropdown 下拉列表-单选 │   │   │   ├── ibiz-dropdown-list 下拉列表-多选 │   │   │   ├── ibiz-emoji-picker 表情选择器 │   │   ├── html html编辑器 │   │   ├── index.ts 编辑器组件注册文件 │   │   ├── markdown markdown编辑器 │   │   ├── not-supported-editor 不支持的编辑器 │   │   ├── number-range 数字范围选择器 │   │   ├── qrcode 二维码组件 │   │   ├── radio-button-list 单选框列表 │   │   ├── rate 评分组件 │   │   ├── raw 原始组件 │   │   ├── slider 滑块 │   │   ├── span span组件 │   │   ├── stepper 步进器组件 │   │   ├── switch 开关组件 │   │   ├── text-box │   │   │   ├── ibiz-input-number 数字输入框 │   │   │   ├── input 文本输入框 │   │   └── upload │   │   ├── ibiz-carousel 图片轮播图 │   │   ├── ibiz-file-upload 文件上传 │   │   ├── ibiz-image-cropping 图片裁剪 │   │   ├── ibiz-image-select 图片预览 │   │   ├── ibiz-image-upload 图片上传 │   ├── ibiz-vue3.ts vue3组件注册文件 │   ├── index.ts vue3组件导出文件 │   ├── locale 多语言 │   │   ├── en 多语言-英文 │   │   └── zh-CN 多语言=中文 │   ├── mob-app │   │   ├── App.scss App样式 │   │   ├── App.tsx App入口组件 │   │   ├── attach-environment-config.ts 环境变量配置 │   │   ├── components │   │   │   ├── home-view 主页视图 │   │   │   ├── index.ts │   │   │   ├── modal-router-shell 模态框路由壳 │   │   │   └── router-shell 路由壳 │   │   ├── create-vue-app.ts 创建vue3应用 │   │   ├── guard │   │   │   ├── auth-guard 鉴权 │   │   │   ├── auth-guard-hooks.ts 鉴权钩子 │   │   ├── index.ts 权限，路由导出文件 │   │   ├── main.ts 入口文件 │   │   ├── router 路由 │   │   └── util │   │   └── unauthorized-handler 未授权处理 │   ├── panel-component 面板组件 │   │   ├── async-action 异步操作组件 │   │   ├── auth-sso 第三方登录组件 │   │   ├── auth-userinfo 用户信息组件 │   │   ├── index.ts 面板组件导出文件 │   │   ├── nav-pos-index 首页导航占位 │   │   ├── panel-app-title 面板-应用标题 │   │   ├── panel-button 面板-按钮 │   │   ├── panel-button-list 面板-按钮组 │   │   ├── panel-carousel 面板-静态轮播图 │   │   ├── panel-tab-panel 面板-分页面板 │   │   ├── panel-video-player 面板-视频播放器 │   │   ├── user-message 面板-用户消息 │   │   ├── view-content-panel-container 面板-内容容器 │   │   ├── view-footer-panel-container 面板-页脚面板 │   │   ├── view-header-panel-container 面板-头部面板 │   │   ├── wf-action-button 面板-工作流操作按钮 │   │   └── wf-step-trace 面板-流程跟踪 │   ├── platform 搭载平台 │   │   ├── ding-talk-platform-provider.ts 搭载平台-钉钉平台 │   │   ├── ios-platform-provider.ts 搭载平台-iOS平台 │   │   └── vue-browser-platform-provider.ts 搭载平台-Vue浏览器平台 │   ├── style 样式 │   ├── util │   │   ├── app-drawer 抽屉 │   │   ├── app-modal 弹窗 │   │   ├── app-popover 弹出框 │   │   ├── app-util 应用工具方法文件，提供登录，登出，更改密码，校验密码等方法 │   │   ├── button-util 按钮工具文件，提供转换按钮类型的方法 │   │   ├── confirm-util 确认框工具 │   │   ├── directive 指令，提供界面元素loading加载的指令 │   │   ├── fullscreen 全屏工具 │   │   ├── index.ts 工具方法导出文件 │   │   ├── loading-util loading工具，提供显示，隐藏加载动画的方法 │   │   ├── message-util 消息工具 │   │   ├── modal-util 弹窗工具 │   │   ├── notification-util 消息通知工具 │   │   ├── open-view-util 打开视图工具 │   │   ├── overlay-controller 遮罩层工具 │   │   ├── pagination 分页工具 │   │   ├── qrcode-util 二维码工具 │   │   ├── scan-qrcode 扫描二维码工具 │   │   ├── store 存储工具 │   │   │   └── view-stack 视图堆栈处理工具 │   │   └── use-popstate-util popstate工具，提供监听popstate事件的能力 │   ├── view 视图 │   │   ├── 404-view 404视图 │   │   ├── index.ts 视图组件导出文件 │   │   ├── login-view 登录视图 │   │   └── portal-view 门户视图 │   └── view-engine 视图引擎 │   ├── index-view.engine.ts 首页视图引擎 │   ├── index.ts 视图引擎导出文件 │   ├── login-view.engine.ts 登录视图引擎 │   ├── mob-calendar-view.engine.ts 日历视图引擎 │   ├── mob-chart-view.engine.ts 图表视图引擎 │   ├── mob-custom-view.engine.ts 自定义视图引擎 │   ├── mob-data-view-engine.ts 数据视图引擎 │   ├── mob-edit-view.engine.ts 编辑视图引擎 │   ├── mob-edit-view3.engine.ts 编辑视图3（分页关系）引擎 │   ├── mob-md-view-engine.ts 数据视图引擎 │   ├── mob-mpickup-view-engine.ts 多数据选择视图引擎 │   ├── mob-opt-view.engine.ts 操作视图引擎 │   ├── mob-pickup-md-view.engine.ts 数据选择视图引擎 │   ├── mob-pickup-tree-view.engine.ts 树选择视图引擎 │   ├── mob-pickup-view.engine.ts 选择视图引擎 │   ├── mob-tab-exp-view.engine.ts 分页导航视图引擎 │   ├── mob-tab-search-view.engine.ts 分页搜索视图引擎 │   ├── mob-tree-exp-view.engine.ts 树导航视图引擎 │   ├── mob-tree-view.engine.ts 树视图引擎 │   ├── mob-wf-dyna-action-view.engine.ts 动态工作流视图引擎 │   ├── mob-wf-dyna-edit-view.engine.ts 动态工作流编辑视图引擎 │   ├── mob-wf-dyna-edit-view3.engine.ts 动态工作流编辑视图3（分页关系）引擎 │   ├── mob-wf-dyna-start-view.engine.ts 动态工作流启动视图引擎 │   ├── mob-wizard-view-engine.ts 向导视图引擎 │   ├── portal-view.engine.ts 门户视图引擎 └───────└── wf-step-trace-view.engine.ts 工作流步骤跟踪视图引擎 ``` ## 📦 开发 1. 安装依赖 进入 @ibiz-template/mob-vue3-components 工作空间后，执行以下命令安装依赖： ```bash pnpm i ``` 2. 链接依赖项目 终端执行 shell 脚本：./scripts/link.sh ，该脚本会将该包中用到ibiz-template下的几个包 link 到本包内： ```bash ./scripts/link.sh ``` 3. 运行项目 执行以下命令运行当前项目： ```bash pnpm dev ``` 4. 链接到全局 执行以下命令链接到全局，供主项目使用： ```bash pnpm link --global ``` ## 📌 更改日志 每个版本的详细更改记录在[发行说明](CHANGELOG.md)中。 ## 📜 许可证 [MIT](LICENSE)