卓诚统一框架通用组件库

注意：尽量不要使用 alpha 版本，可能会有较多BUG

技术栈

1. vue3.0
2. 字体图标

• font-awesome
• npm install font-awesome --save // 字体图标
• yarn add font-awesome

安装组件

yarn add zc-web-component

在入口代码中增加服务器接口地址的配置，这里假设是main.ts

// 引入组件 version < 1.0.0
import ZcWebComponent, { ConfigManager } from "zc-web-component";

// 引入组件及样式 version >= 1.0.0
import ZcWebComponent, { ConfigManager } from "zc-web-component";
import 'zc-web-component/dist/index.css'

// 在入口文件中配置接口地址，用于获取数据
ConfigManager.setComponentConfig({
    baseUrl: 'http://yourhostname/api/',
    baseUploadUrl: '',
    baseDownloadUrl: '',
    baseImageUrl: '',
    platformCode: "sys-platform",
    loginUrl:'http://localhost',
    hasTagsView:false,//是否启用标签页和侧边栏混合导航
    verifyCode: false, //是否使用code做验证
    hasOnLevel: false, // 是否开启侧边菜单展开收起功能
    openLevel: -1, // 展开几层菜单
})

// Vue2.0 引用
Vue.use(ZcWebComponent)

// Vue3.0 引用
app.use(ZcWebComponent)

// 获取登录信息，如果地址上有传过来的token将会存入cookie中
// version < 0.1.4
ConfigManager.loginCover();
//更新loginCover使用
// version >= 0.1.4
ConfigManager.loginCover(()=>{ 
    // 组件和子系统的app.use()挂载内容放置位置
});

弹窗登录说明

• 1、登录调用基础平台登录页登录接口
• 2、取消后跳转loginUrl地址即登录地址
• 3、弹窗登录只针对组件库code和token过期或失效

axios 配置自动引用 cookie

axiox.defaults.withCredentials = true

最后在Vue页面中引用组件即可，无需单独引入组件

<!-- 使用“通用菜单”组件时在“母版页”或需要的页面中增加如下标签即可 -->
<ui-header/>

<!-- 使用“通用菜单”组件时在“母版页”或需要的页面中增加如下标签即可 -->
注意事项：各自项目的本地路由path必须和获取到的路由完全相同
<ui-tags-nav/>

可用组件

app.use(ZcWebComponent) 后即可直接使用，无需单独 import。完整的参数、事件、插槽说明见 HOW-TO-USE.md。

| 标签 | 说明 | | --- | --- | | ui-header | 顶部条（菜单、面包屑、搜索、用户信息、登录/退出），高度固定 60px | | ui-sidebar | 左侧菜单，支持展开收起 | | ui-tags-nav | 多标签页导航 | | ui-toast | 全局轻提示，通过 ref 调用 | | cc-menu | 顶部条弹出的全屏子系统菜单 | | cc-breadcrumb | 面包屑 | | cc-recently-visited | 最近访问下拉 | | cc-sidebar-menu / cc-tree / cc-tree-item | 通用菜单树 | | cc-tree-menu / cc-tree-menu-item | 侧边菜单树 | | cc-info-bar / cc-info-item / cc-split | 顶部条信息区布局小件 |

更新记录

1.3.6

• 侧边菜单 ui-sidebar 不再展示接口的第一级菜单：第一级只作分组容器，第二级提升为顶层显示，缩进整体左移一级，顶层行可点击并参与高亮
• 顶层（第二级）菜单行加很淡的品牌蓝背景 rgba(1,64,152,.05) + 圆角，比 hover 的 .08 浅一档；顶部条 60px 与菜单行 40px 高度均未改动

1.3.4

• 美化顶部 ui-header 条：渐变背景、图标按钮 hover、胶囊搜索框（聚焦高亮）、头像描边、登录/退出按钮式交互；高度仍为 60px，页面布局不受影响
• 美化授权过期后的弹窗登录：卡片式布局、顶部标题区、输入框聚焦态、渐变主按钮、入场动画；点「取消」仅关闭登录弹框，不再跳转 loginUrl；登录框下方以灰色文字显示组件库版本号（构建时从 package.json 读取）
• 移除已无业务使用的空壳组件：cc-modal、cc-table、cc-toast、cc-pagination、dd-user、dd-role、dd-department
• 文档：HOW-TO-USE.md 移至仓库根目录并按现有组件重写，同时修正 README 中过时的样式引入路径（dist/style.css → dist/index.css）
• ConfigManager.loginCover：code 验证登录成功并执行 callback 后，自动清理地址栏上的 code/url/resource 参数（code 仅一次有效，避免污染地址栏；清理放在 callback 之后，不影响侧边菜单读取 url 参数定位跳转）

新增功能

功能

• 侧边菜单展开收起功能
• 新增跳转子系统菜单高亮

使用

在ConfigManager.setComponentConfig 中添加配置参数

• hasOnLevel: false, 是否开启侧边菜单展开收起功能(默认false不开启)
• openLevel: -1, 展开几层菜单(生效前提：已经开启菜单展开收起功能)

注意事项

父级菜单即没有对应页面的菜单route必须为空，否则会影响展开收起功能的使用

范例

文件后缀带有sample.json的是数据格式范例，可以作为参考

1、插件项目打包

yarn pack

2、本地安装测试的项目（注意：项目中安装本地打包的插件时候，先停止运行项目，再安装，不停止可能导致安装失败，报错等）

yarn add 打包后的本地路径

3、查看缓存

yarn cache list

4、清除缓存

yarn cache clean

5、删除安装包

yarn remove [package]

package.json 中的依赖显示

{ "zc-web-component": "C:\\zc-web-component-v0.0.1-alpha-17.tgz" }

后续可通过 npm install zc-web-component 直接调试