image

时间过的真快，自从 1.1.4 发布又过去一个月了，这个月依旧每天在忙，D2Admin 也进行了大重构，先介绍一下这次的 1.1.5 相比 1.1.4 有哪些大的改变吧 ~

重要升级

vue-cli3

D2Admin 这次完成了 vue-cli3 的重构，省去了以前繁琐的 webpack 配置，打包速度更快，环境变量设置更简单，文件目录更简洁。

d2-container 组件重构

创建页面最重要的 d2-container 组件进行了重构，详见 页面容器，依旧是支持 full + card + ghost 三种模式，不同的是三种模式现在都分别支持 header 和 footer 插槽，并且都支持开关自定义滚动条，并且提供了滚动条设置的 props。

type="full"

image

type="card"

image

type="ghost"

image

在 页面容器 文档中我也分别为三种模式 x 是否有插槽 x 是否启用滚动条优化的各种可能做了大量插图介绍，欢迎去文档站点查看。

image

在线示例（请先完成一次登陆）

• 布局容器

image

页面缓存逻辑优化

首先承认一个错误：在 1.1.4 中多标签页的缓存逻辑是有一点问题的，导致即使关闭了多页控制组件的 tab，这个页面依旧在缓存中。在 1.1.5 中重写了页面缓存逻辑，这个错误被修复。

开放多标签页控制

在 1.1.4 中，多页控制的逻辑有些写在控制组件内，有些写在 vuex 中，并且也没有公布使用方式。在 1.1.5 中所有的页面控制都重新组织后放入 vuex，并且给出了所有的文档和示例，这意味着如果你有需要，可以随意使用这些 API 控制多标签页的打开和关闭。

详见 VUEX 实用工具

开放菜单控制

在以前的版本中，菜单的数据切换是在主布局组件内完成的，这就导致二次开发时有很多朋友询问我应该怎样修改菜单的设置，针对这个问题 1.1.5 新开放了顶栏菜单和侧边栏菜单的控制 API：

举个栗子，现在你可以这样设置：

// 在任何地方
// menuHeader 是已经处理好的菜单数据
$store.commit('d2adminMenuHeaderSet', menuHeader)
// 顶栏菜单更新完毕

就这么简单。

在线示例（请先完成一次登陆）

• 菜单控制

image

详见 VUEX 实用工具

cookie读写包装

为什么不直接使用 cookie ？

util.cookies 内部使用 js-cookie 进行操作，并且在 cookie 名称上多做了一层逻辑封装，例如

util.cookies.set({
  name: 'name',
  value: 'value',
  setting: {
    expires: 365
  }
})

实际存储的 cookie 是

d2admin-${version}-name : value

使用

util.cookies.get('name')

实际取的也是 d2admin-${version}-name

最后你的 cookie 信息实际上可能类似这样（举例）：

• d2admin-1.1.5-name : FairyEver
• d2admin-1.1.5-uuid : h8dsafy98du9f6yadsyf
• d2admin-1.1.5-token : dys87f89dsafy89adsh

这样做的好处是可以保证如果您的 D2Admin 升级到了新版本，打开时使用的数据一定是重新初始化的，而您在使用 cookie 时无论赋值还是取值，都觉察不出这层包装

详见 Util 实用工具

数据持久化优化

数据持久化现在给二次开发提供了全新的 API

借助这些 API 可以做什么？

• 将 store 中的某项持久化，可以区分用户，也可以不区分
• 随意持久化任何数据，可以区分用户存储，也可以存储成所有用户共享

详见 VUEX 实用工具

在线示例（请先完成一次登陆）

• 用户数据
• 公用数据

image

自动收集用户浏览器信息

不需要任何的操作，可以在 store 中获得用户的浏览器信息，数据格式示例：

{
  browser: {
    name: "Chrome",
    version: "67.0.3396.99",
    major: "67"
  },
  engine: {
    name: "WebKit",
    version: "537.36"
  },
  os: {
    name: "Mac OS",
    version: "10.13.4"
  },
  device: {},
  cpu: {}
}

侧边栏控制

并且现在侧边栏的状态会被自动持久化存储，也就是说刷新浏览器后侧边栏会保持收缩或者展开

快速上手章节

为了让大家更简单地使用 D2Admin 搭建第一个页面，新书写了“快速上手”章节，后续计划会出一系列教程。

• 前置知识
• 准备
• 下载项目
• 安装环境
• 安装依赖
• 开发调试
• 新建页面
• 设置路由
• 设置菜单
• 效果
• 资源

详见 快速上手

其它的更新信息见下节

更新日志

• [ 修改 ] vue-cli3 项目重构，目录调整
• [ 修改 ] 全局状态管理设计优化
• [ 修改 ] 多标签页操作全部转移至 vuex
• [ 修改 ] 修复了多标签页无法清除缓存的 bug
• [ 修改 ] bug fixed #38
• [ 修改 ] bug fixed #41
• [ 修改 ] 侧边栏和顶栏菜单数据控制转移到 vuex 集中管理
• [ 修改 ] 页面最小宽度设置
• [ 新增 ] d2-highlight 组件新增 format-html 参数
• [ 新增 ] 自动获取用户浏览器 UA
• [ 新增 ] playground 新增浏览器信息查看界面
• [ 修改 ] 登陆注销逻辑移至 vuex
• [ 新增 ] 登陆页面新增快速选择用户示例
• [ 新增 ] 侧边栏切换控制辑移至 vuex
• [ 新增 ] 判断手机浏览自动跳转至提示页面
• [ 修改 ] 侧边栏弹出菜单尺寸缩小以容纳更多菜单
• [ 修改 ] d2-container 组件重构，每种模式现都支持 scroll 属性以及 header footer 插槽
• [ 修改 ] 修复全屏按钮退出全屏状态不更新的 bug
• [ 修改 ] 修复多标签页缓存逻辑 bug
• [ 新增 ] 持久化存储根据系统版本区分数据，防止因更新导致数据错乱
• [ 新增 ] 注销画面灰度效果
• [ 新增 ] .d2-card 样式类，可以让 el-card 具有跟随主题变化的样式
• [ 新增 ] ElementUI 表格组件全部示例移植
• [ 新增 ] 全局状态管理 playground
• [ 新增 ] 用户私有持久化数据 playground
• [ 新增 ] 侧边栏和顶栏菜单设置 playground
• [ 新增 ] d2-container 组件 card 模式下 footer 样式优化
• [ 修改 ] 侧边栏折叠模式下弹出菜单尺寸缩小
• [ 修改 ] 默认取消了侧边栏的自定义滚动条显示
• [ 新增 ] cookie 读写包装
• [ 新增 ] 持久化存储读写包装，提供快速操作当前用户数据的 mutation
• [ 新增 ] 持久化存储读写包装，提供快速操作所有用户共享数据的 mutation
• [ 新增 ] 侧边栏折叠状态现在会根据用户区分记录，刷新页面保留之前的状态

一些额外的事

被 "借鉴" 总是不愉快的

总结

首先感谢那些给我提出意见以及给我帮助的朋友（包括精神鼓励还有红包鼓励），大家的 star 也是对我的鼓励。

在一个人精力有限的前提下，我会尽量吧 D2Admin 做的更好，现在只能承诺给大家：该有的以后都会有，这个项目会一直用心做下去，并且以后给大家比较惊喜的更新。

关于接下来的计划还有正在进行的其它计划，暂时还要保密，敬请期待吧！

既然做了，就要好好做，还要做好。

项目地址

在最后，如果你看完了，并且觉得还不错，希望可以到 项目主页 上点一个 star 作为你对这个项目的认可与支持，谢谢。