diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index ae9b2bca..7a8568e0 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -57,8 +57,6 @@ module.exports = { { text: '菜单', link: '/zh/sys-menu/' }, { text: '路由', link: '/zh/sys-route/' }, { text: '多页面', link: '/zh/sys-multi-page/' }, - { text: '主题系统', link: '/zh/sys-theme/' }, - { text: '登陆和注销', link: '/zh/sys-account/' }, { text: '数据持久化', link: '/zh/sys-db/' }, { text: 'CSS 实用类', link: '/zh/sys-css/' }, { text: 'JS Util', link: '/zh/sys-util/' } diff --git a/docs/zh/sys-account/README.md b/docs/zh/sys-account/README.md deleted file mode 100644 index 4b94ed06..00000000 --- a/docs/zh/sys-account/README.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -sidebar: auto ---- - -# title - -info \ No newline at end of file diff --git a/docs/zh/sys-css/README.md b/docs/zh/sys-css/README.md index 4b94ed06..443f8b92 100644 --- a/docs/zh/sys-css/README.md +++ b/docs/zh/sys-css/README.md @@ -2,6 +2,106 @@ sidebar: auto --- -# title +# CSS 实用类 -info \ No newline at end of file +## 样式 + +| 类名 | 效果 | +| --- | --- | +| `.d2-card` | 使 el-card 组件样式跟随主题变化 | + +* `.d2-card` 示例 + +``` vue + + + body + + +``` + +## 文字 + +| 类名 | 效果 | +| --- | --- | +| `.d2-text-center` | 文字水平居中 | + +## 浮动 + +| 类名 | 效果 | +| --- | --- | +| `.d2-fl` | 左浮动 | +| `.d2-fr` | 右浮动 | +| `.d2-clearfix` | 清除浮动 | + +## 边距 + +| 类名 | 效果 | +| --- | --- | +| `.d2-m-0` | 外边距 0px | +| `.d2-mt-0` | 上外边距 0px | +| `.d2-mr-0` | 右外边距 0px | +| `.d2-mb-0` | 下外边距 0px | +| `.d2-ml-0` | 左外边距 0px | +| `.d2-p-0` | 内边距 0px | +| `.d2-pt-0` | 上内边距 0px | +| `.d2-pr-0` | 右内边距 0px | +| `.d2-pb-0` | 下内边距 0px | +| `.d2-pl-0` | 左内边距 0px | +| `.d2-m-5` | 外边距 5px | +| `.d2-mt-5` | 上外边距 5px | +| `.d2-mr-5` | 右外边距 5px | +| `.d2-mb-5` | 下外边距 5px | +| `.d2-ml-5` | 左外边距 5px | +| `.d2-p-5` | 内边距 5px | +| `.d2-pt-5` | 上内边距 5px | +| `.d2-pr-5` | 右内边距 5px | +| `.d2-pb-5` | 下内边距 5px | +| `.d2-pl-5` | 左内边距 5px | +| `.d2-m-10` | 外边距 10px | +| `.d2-mt-10` | 上外边距 10px | +| `.d2-mr-10` | 右外边距 10px | +| `.d2-mb-10` | 下外边距 10px | +| `.d2-ml-10` | 左外边距 10px | +| `.d2-p-10` | 内边距 10px | +| `.d2-pt-10` | 上内边距 10px | +| `.d2-pr-10` | 右内边距 10px | +| `.d2-pb-10` | 下内边距 10px | +| `.d2-pl-10` | 左内边距 10px | +| `.d2-m-15` | 外边距 15px | +| `.d2-mt-15` | 上外边距 15px | +| `.d2-mr-15` | 右外边距 15px | +| `.d2-mb-15` | 下外边距 15px | +| `.d2-ml-15` | 左外边距 15px | +| `.d2-p-15` | 内边距 15px | +| `.d2-pt-15` | 上内边距 15px | +| `.d2-pr-15` | 右内边距 15px | +| `.d2-pb-15` | 下内边距 15px | +| `.d2-pl-15` | 左内边距 15px | +| `.d2-m-20` | 外边距 20px | +| `.d2-mt-20` | 上外边距 20px | +| `.d2-mr-20` | 右外边距 20px | +| `.d2-mb-20` | 下外边距 20px | +| `.d2-ml-20` | 左外边距 20px | +| `.d2-p-20` | 内边距 20px | +| `.d2-pt-20` | 上内边距 20px | +| `.d2-pr-20` | 右内边距 20px | +| `.d2-pb-20` | 下内边距 20px | +| `.d2-pl-20` | 左内边距 20px | + +## 边距简写 + +20px 设定为通用边距 可以如下简写 + +| 类名 | 效果 | +| --- | --- | +| `.d2-m` | 外边距 20px | +| `.d2-mt` | 上外边距 20px | +| `.d2-mr` | 右外边距 20px | +| `.d2-mb` | 下外边距 20px | +| `.d2-ml` | 左外边距 20px | +| `.d2-p` | 内边距 20px | +| `.d2-pt` | 上内边距 20px | +| `.d2-pr` | 右内边距 20px | +| `.d2-pb` | 下内边距 20px | +| `.d2-pl` | 左内边距 20px | \ No newline at end of file diff --git a/docs/zh/sys-db/README.md b/docs/zh/sys-db/README.md index 4b94ed06..bfabe98e 100644 --- a/docs/zh/sys-db/README.md +++ b/docs/zh/sys-db/README.md @@ -2,6 +2,61 @@ sidebar: auto --- -# title +# 数据持久化 -info \ No newline at end of file +D2Admin 对数据持久化做了更贴心的包装。 + +数据持久化在 D2Admin 中主要体现在两个方面: + +* 系统设置持久化 +* 用户数据持久化 + +系统设置持久化已经在核心模块中写好,这里主要介绍用户数据持久化。 + +## 公用存储 + +公用存储指所有用户共用的存储区域, 使用 + +``` js +await this.$store.dispatch('d2admin/db/database') +``` + +获得存储实例进行操作。 + +## 私有存储 + +私有存储指当前用户专用的存储区域, 不同用户之间存储不会相互干扰, 使用 + +``` js +await this.$store.dispatch('d2admin/db/database', { user: true }) +``` + +获得存储实例进行操作, 不同用户条件下获取的存储实例指向位置不同。 + +## 路由存储 + +路由存储指当前路由的存储区域, 不同路由之间存储不会相互干扰, 使用 + +``` js +await this.$store.dispatch('d2admin/db/databasePage', { vm: this }) +``` + +获得存储实例进行操作, 不同路由条件下获取的存储实例指向位置不同, 可以指定路由区分依据 name | path | fullPath, 默认根据路由的 name 区分不同的路由。 + +## 私有路由存储 + +私有路由存储指当前路由的存储区域, 并且同时还根据用户区分, 相当于结合了 “路由存储” 和 “私有存储”, 不同路由以及不同用户之间存储不会相互干扰, 使用 + +``` js +await this.$store.dispatch('d2admin/db/databasePage', { vm: this, user: true }) +``` + +获得存储实例进行操作, 不同路由和用户条件下获取的存储实例指向位置不同, 可以指定路由区分依据 name | path | fullPath, 默认根据路由的 name 区分不同的路由。 + +## 路由快照 + +路由快照相当于路由存储一种快捷操作, 会将传入 vm 实例的 $data 全部持久化, 下面的表单来自 Element 的表单示例, 在 D2Admin 的本页示例中你可以随意填写这个表单, 表单内容会自动实时持久化, 无论是切换标签页、重新打开标签页、刷新浏览器、重开浏览器、重开浏览器标签页等, 该页面数据都会自动恢复到上次填写的状态, 这些都只需要你使用 D2Admin 提供的两个方法, 总共只需要多写十几行代码。 + +## 私有路由快照 + +私有路由快照相当于私有路由存储一种快捷操作, 会将传入 vm 实例的 $data 全部根据用户区分持久化, 下面的表单来自 Element 的表单示例, 在 D2Admin 的本页示例中你可以随意填写这个表单, 表单内容会自动实时持久化, 无论是切换标签页、重新打开标签页、刷新浏览器、重开浏览器、重开浏览器标签页等, 该页面数据都会自动恢复到上次填写的状态, 这些都只需要你使用 D2Admin 提供的两个方法, 总共只需要多写十几行代码。 \ No newline at end of file diff --git a/docs/zh/sys-multi-page/README.md b/docs/zh/sys-multi-page/README.md index 7073a0c1..ee1893ec 100644 --- a/docs/zh/sys-multi-page/README.md +++ b/docs/zh/sys-multi-page/README.md @@ -19,7 +19,7 @@ import { frameInRoutes } from '@/router/routes' ``` js $store.commit('d2admin/page/poolSet', pool) ``` -将得到的路由数据存储到 vuex 中备用。 +将得到的路由数据存储到 vuex 中备用。这份数据在操作多页面数据时会使用到。 ## 触发 diff --git a/docs/zh/sys-theme/README.md b/docs/zh/sys-theme/README.md deleted file mode 100644 index 4b94ed06..00000000 --- a/docs/zh/sys-theme/README.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -sidebar: auto ---- - -# title - -info \ No newline at end of file