# 卓诚统一框架通用组件库

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

## 技术栈

1. vue3.0
2. 字体图标
- [font-awesome](https://fontawesome.dashgame.com/)
- npm install font-awesome --save  // 字体图标
- yarn add font-awesome

## 安装组件
```
yarn add zc-web-component
```
### 在入口代码中增加服务器接口地址的配置，这里假设是main.ts

```js
// 引入组件 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

```js
axiox.defaults.withCredentials = true
```

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

## 可用组件

`app.use(ZcWebComponent)` 后即可直接使用，无需单独 import。完整的参数、事件、插槽说明见 [HOW-TO-USE.md](./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 直接调试