Merge pull request #12 from FairyEver/dev

timeago removed and add the dayjs

Former-commit-id: 66533b336178e705575efed441c7cd7f03af2807
Former-commit-id: 22353998033eb2b079c5e860353da157afb7fdbb
Former-commit-id: a9ed8244e2403578a6be4a7c38d2191f898f86b3
Former-commit-id: fe97b5e3a8358f64b988253b88e19e29a27d0442

docs/.vuepress/config.js

@@ -70,8 +70,7 @@ function sideBarPlugins () {
     'data-export',
     'data-import',
     'i18n',
-    'mock',
+    'mock'
-    'timeago'
   ]
 }
 

docs/zh/components/markdown.md

@@ -5,7 +5,7 @@
 | 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
 | --- | --- | --- | --- | --- | --- |
 | url | markdown文件地址 | 非 | String |  | 无 |
-| md | markdown内容 | 非 | String |  | 无 |
+| source | markdown内容 | 非 | String |  | 无 |
 | highlight | 代码高亮 | 非 | Boolean |  | false |
 | baidupan | 百度网盘分享链接显示优化 | 非 | Boolean |  | true |
 
@@ -26,7 +26,7 @@ const md = `# Header
 
 text`
 
-<d2-markdown :md="md"/>
+<d2-markdown :source="md"/>
 ```
 
 ## 百度网盘分享链接优化

docs/zh/guide/README.md

@@ -34,7 +34,7 @@ d2admin-vue-element（以下简称 d2admin）是一个管理系统前端模板
 * 图表自适应可拖拽大小的卡片容器（示例）
 * 简化剪贴板操作
 * 简化Cookie操作
-* 时间计算工具
+* 时间日期计算工具
 * 导入 Excel （ xlsx 格式 + CSV 格式 ）
 * 数据导出 Excel （ xlsx 格式 + CSV 格式 ）
 * 数据导出文本

docs/zh/guide/change-log.md

@@ -10,11 +10,14 @@
 * [ 修改 ] 路由注册回归最简单的写法
 * [ 修复 ] 首次加载 loading 样式类名和程序内类名冲突，新的加载类名使用 `d2-app-loading` 前缀
 * [ 修改 ] 所有类似 `dd-` 的样式前缀(包括自动注册图标的id前缀)统一改为 `d2-`
-* [ 修复 ] 修复 `highlight` 组件和 `markdown` 组件的样式冲突
+* [ 修复 ] 修复 `d2-highlight` 组件和 `d2-markdown` 组件的样式冲突
 * [ 修改 ] 内置组件名称统一改为 `d2-` 前缀，统一使用横线连接 (kebab-case) 风格
 * [ 修改 ] 顶栏 logo 阴影删除
 * [ 新增 ] 主题系统
 * [ 新增 ] 三个主题，分别为 `d2admin 经典`，`简约线条`，`流星`
+* [ 修改 ] `d2-markdown` 组件 `md` 参数改名为 `source`
+* [ 修改 ] 删除了 `d2-markdown` 组件中图片的白色背景
+* [ 修改 ] 删除 `timeago` 插件，更换为更强大的 `dayjs`
 
 ## v1.0.0
 

docs/zh/plugins/timeago.md

@@ -1,49 +0,0 @@
-# 时间差计算
-
-``` js
-import timeago from 'timeago.js'
-export default {
-  data () {
-    return {
-      // 打开页面时间
-      openPageDate: new Date(),
-      // 打开页面已经过去的时间
-      openPageDateAgo: '',
-      // 打开页面时间计时器
-      dateTimeRangeTimer: null,
-      // 起止时间
-      dateTimeRange: [new Date(2018, 0, 1, 0, 0), new Date()],
-      // 上面起止时间的计算结果
-      dateTimeRangeAgo: ''
-    }
-  },
-  mounted () {
-    // 刷新打开页面过去的时间
-    this.refreshOpenPageDateAgo()
-    this.dateTimeRangeTimer = setInterval(this.refreshOpenPageDateAgo, 1000)
-    // 刷新起止时间的计算结果
-    this.refreshDateTimeRangeAgo()
-  },
-  beforeDestroy () {
-    // 清空计时器
-    clearInterval(this.dateTimeRangeTimer)
-  },
-  watch: {
-    dateTimeRange () {
-      // 刷新起止时间的计算结果
-      this.refreshDateTimeRangeAgo()
-    }
-  },
-  methods: {
-    // 计算打开页面过了多久
-    refreshOpenPageDateAgo () {
-      this.openPageDateAgo = timeago().format(this.openPageDate, 'zh_CN')
-    },
-    // 计算起止时间间隔
-    refreshDateTimeRangeAgo () {
-      const timeagoInstance = timeago(this.dateTimeRange[1])
-      this.dateTimeRangeAgo = timeagoInstance.format(this.dateTimeRange[0], 'zh_CN')
-    }
-  }
-}
-```

package.json

@@ -18,6 +18,7 @@
     "axios": "^0.17.1",
     "clipboard-polyfill": "^2.4.1",
     "countup.js": "^1.9.3",
+    "dayjs": "^1.6.7",
     "element-ui": "^2.0.11",
     "file-saver": "^1.3.3",
     "github-markdown-css": "^2.10.0",
@@ -31,7 +32,6 @@
     "path-posix": "^1.0.0",
     "quill": "^1.3.4",
     "simplemde": "^1.11.2",
-    "timeago.js": "^3.0.2",
     "vue": "^2.5.2",
     "vue-grid-layout": "^2.1.11",
     "vue-i18n": "^7.4.2",

src/assets/style/fixed/markdown.scss

@@ -7,4 +7,7 @@
   h1, h2 {
     border-bottom: none;
   }
+  img {
+    background-color: transparent;
+  }
 }

src/assets/style/public-class.scss

@@ -40,40 +40,26 @@
 }
 
 // 边距相关
-.#{$prefix}-m { margin: $margin; }
+$sizes: (0, 10, 15, 20);
-.#{$prefix}-mt { margin-top: $margin; }
-.#{$prefix}-mr { margin-right: $margin; }
-.#{$prefix}-mb { margin-bottom: $margin; }
-.#{$prefix}-ml { margin-left: $margin; }
 
-.#{$prefix}-m-10 { margin: 10px; }
+@for $index from 1 to 5 {
-.#{$prefix}-mt-10 { margin-top: 10px; }
+  .#{$prefix}-m-#{nth($sizes, $index)} { margin: #{nth($sizes, $index)}px; }
-.#{$prefix}-mr-10 { margin-right: 10px; }
+  .#{$prefix}-mt-#{nth($sizes, $index)} { margin-top: #{nth($sizes, $index)}px; }
-.#{$prefix}-mb-10 { margin-bottom: 10px; }
+  .#{$prefix}-mr-#{nth($sizes, $index)} { margin-right: #{nth($sizes, $index)}px; }
-.#{$prefix}-ml-10 { margin-left: 10px; }
+  .#{$prefix}-mb-#{nth($sizes, $index)} { margin-bottom: #{nth($sizes, $index)}px; }
+  .#{$prefix}-ml-#{nth($sizes, $index)} { margin-left: #{nth($sizes, $index)}px; }
+}
 
-.#{$prefix}-m-0 { margin: 0px; }
+// 快速使用
-.#{$prefix}-mt-0 { margin-top: 0px; }
-.#{$prefix}-mr-0 { margin-right: 0px; }
-.#{$prefix}-mb-0 { margin-bottom: 0px; }
-.#{$prefix}-ml-0 { margin-left: 0px; }
 
+.#{$prefix}-m { margin: 20px; }
+.#{$prefix}-mt { margin-top: 20px; }
+.#{$prefix}-mr { margin-right: 20px; }
+.#{$prefix}-mb { margin-bottom: 20px; }
+.#{$prefix}-ml { margin-left: 20px; }
 
-
+.#{$prefix}-p { padding: 20px; }
-.#{$prefix}-p { padding: $margin; }
+.#{$prefix}-pt { padding-top: 20px; }
-.#{$prefix}-pt { padding-top: $margin; }
+.#{$prefix}-pr { padding-right: 20px; }
-.#{$prefix}-pr { padding-right: $margin; }
+.#{$prefix}-pb { padding-bottom: 20px; }
-.#{$prefix}-pb { padding-bottom: $margin; }
+.#{$prefix}-pl { padding-left: 20px; }
-.#{$prefix}-pl { padding-left: $margin; }
-
-.#{$prefix}-p-10 { padding: 10px; }
-.#{$prefix}-pt-10 { padding-top: 10px; }
-.#{$prefix}-pr-10 { padding-right: 10px; }
-.#{$prefix}-pb-10 { padding-bottom: 10px; }
-.#{$prefix}-pl-10 { padding-left: 10px; }
-
-.#{$prefix}-p-0 { padding: 0px; }
-.#{$prefix}-pt-0 { padding-top: 0px; }
-.#{$prefix}-pr-0 { padding-right: 0px; }
-.#{$prefix}-pb-0 { padding-bottom: 0px; }
-.#{$prefix}-pl-0 { padding-left: 0px; }

src/assets/style/public.scss

@@ -1,5 +1,4 @@
 @import '~@/assets/style/unit/_color.scss';
-@import '~@/assets/style/unit/_size.scss';
 
 // 工具类名统一前缀
 $prefix: d2;

src/assets/style/theme/line/setting.scss

@@ -13,7 +13,7 @@ $theme-container-border-outer: 1px solid $color-border-1;
 
 // 顶栏和侧边栏中展开的菜单 hover 状态下
 $theme-menu-item-color-hover: #293849;
-$theme-menu-item-background-color-hover: #ecf5ff;
+$theme-menu-item-background-color-hover: #EFEFEF;
 
 // 顶栏上的文字颜色
 $theme-header-item-color: $color-text-normal;

src/assets/style/theme/star/setting.scss

@@ -8,7 +8,7 @@ $theme-bg-image: '/static/image/bg/star-squashed.jpg';
 // container组件
 $theme-container-background-color: rgba(#FFF, .9);
 $theme-container-header-footer-background-color: rgba(#FFF, .6);
-$theme-container-border-inner: 1px solid #8fb0b1;
+$theme-container-border-inner: 1px solid #cecece;
 $theme-container-border-outer: none;
 
 // 顶栏和侧边栏中展开的菜单 hover 状态下

src/assets/style/theme/theme.scss

@@ -71,16 +71,6 @@
     .el-aside {
       transition: width .3s;
       overflow: inherit;
-      // 空菜单
-      .d2-side-menu-empty {
-        background-color: rgba(#000, .03);
-        margin: $margin;
-        margin-top: 0px;
-        border-radius: 4px;
-        line-height: 100px;
-        text-align: center;
-        color: $color-text-sub;
-      }
       // [菜单] 正常状态
       .el-menu {
         background-color: transparent;

src/assets/style/unit/_size.scss

@@ -1 +0,0 @@
-$margin: 20px;

src/components/core/d2-container/index.vue

@@ -45,15 +45,11 @@ export default {
 <style lang="scss">
 @import '~@/assets/style/public.scss';
 .container-component {
-  // margin-right: 20px;
-  // margin-bottom: 20px;
   position: absolute;
   top: 0px;
   bottom: 0px;
   left: 0px;
   right: 0px;
-  // padding-right: $margin;
-  // padding-bottom: $margin;
   overflow: auto;
 }
 @media (min-width: 576px) {

src/components/core/d2-markdown/index.vue

@@ -19,7 +19,7 @@ export default {
       required: false,
       default: ''
     },
-    md: {
+    source: {
       type: String,
       required: false,
       default: ''
@@ -45,7 +45,7 @@ export default {
   mounted () {
     if (this.url) {
       this.initWithUrl()
-    } else if (this.md) {
+    } else if (this.source) {
       this.initWithMd()
     } else {
       console.log('not mounted init')
@@ -54,7 +54,7 @@ export default {
   methods: {
     // 使用 md 初始化
     initWithMd () {
-      this.markedHTML = this.marked(this.md)
+      this.markedHTML = this.marked(this.source)
     },
     // 使用 url 初始化
     async initWithUrl () {

src/components/demo/d2-demo-link-btn/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <el-button-group>
+    <el-button v-if="title" size="mini">{{title}}</el-button>
+    <el-button size="mini" @click="$open(link)">
+      <d2-icon :name="icon"/>
+      {{link}}
+    </el-button>
+  </el-button-group>
+</template>
+
+<script>
+export default {
+  name: 'd2-demo-link-btn',
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: 'link'
+    },
+    link: {
+      type: String,
+      required: false,
+      default: 'https://github.com/FairyEver'
+    }
+  }
+}
+</script>

src/components/demo/register.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
 
+Vue.component('d2-demo-link-btn', () => import('@/components/demo/d2-demo-link-btn'))
 Vue.component('d2-demo-page-header', () => import('@/components/demo/d2-demo-page-header'))
 Vue.component('d2-demo-page-cover', () => import('@/components/demo/d2-demo-page-cover'))

src/main.js

@@ -33,18 +33,21 @@ import '@/mock/register'
 // vuex
 import store from '@/store/index.js'
 
-// 插件 log简化
-import pluginLog from '@/plugin/log'
 // 插件 导出文件
 import pluginImport from '@/plugin/import'
 // 插件 导出文件
 import pluginExport from '@/plugin/export'
+// 插件 log简化
+import pluginLog from '@/plugin/log'
+// 插件 打开页面
+import pluginOpen from '@/plugin/open'
 
 Vue.use(ElementUI)
 
-Vue.use(pluginLog)
 Vue.use(pluginImport)
 Vue.use(pluginExport)
+Vue.use(pluginLog)
+Vue.use(pluginOpen)
 
 Vue.config.productionTip = false
 

src/menu/index.js

@@ -40,8 +40,8 @@ const demoPlugins = {
     },
     { path: `${pre}build`, title: '环境区分' },
     { path: `${pre}clipboard-polyfill`, title: '剪贴板访问' },
-    { path: `${pre}js-cookie`, title: 'Cookie 读写' },
+    { path: `${pre}day`, title: '日期计算' },
-    { path: `${pre}timeago`, title: '时间差计算' }
+    { path: `${pre}js-cookie`, title: 'Cookie 读写' }
   ])('/demo/plugins/')
 }
 
@@ -79,11 +79,18 @@ const demoComponents = {
         { path: `${pre}icon/svg`, title: 'SVG图标组件' }
       ]
     },
+    {
+      path: `${pre}markdown`,
+      title: 'markdown 解析',
+      children: [
+        { path: `${pre}markdown/source`, title: '指定资源' },
+        { path: `${pre}markdown/url`, title: '异步加载文件' }
+      ]
+    },
     { path: `${pre}countup`, title: '数字动画' },
     { path: `${pre}editor-quill`, title: '富文本编辑器' },
     { path: `${pre}editor-simpleMDE`, title: 'markdown编辑器' },
-    { path: `${pre}highlight`, title: '代码高亮显示' },
+    { path: `${pre}highlight`, title: '代码高亮显示' }
-    { path: `${pre}markdown`, title: 'markdown解析' }
   ])('/demo/components/')
 }
 

src/pages/core/login/style.scss

@@ -61,6 +61,6 @@
   // 帮助按钮
   .button-help {
     width: 300px;
-    margin-top: $margin;
+    margin-top: 20px;
   }
 }

src/pages/demo/business/user-center/home/index.vue

@@ -1,8 +1,6 @@
 <template>
   <d2-container type="full">
-    <template slot="header">
+    <template slot="header">用户中心</template>
-      用户中心
-    </template>
     doing...
   </d2-container>
 </template>

src/pages/demo/components/container/card.vue

@@ -1,7 +1,7 @@
 <template>
   <d2-container>
     <template slot="header">我是插入到 header 中的内容</template>
-    <d2-markdown :md="doc"/>
+    <d2-markdown :source="doc"/>
   </d2-container>
 </template>
 

src/pages/demo/components/container/full.vue

@@ -3,7 +3,7 @@
     <template slot="header">
       我是插入到 header 中的内容
     </template>
-    <d2-markdown :md="doc"/>
+    <d2-markdown :source="doc"/>
     <template slot="footer">
       我是插入到 footer 中的内容
     </template>

src/pages/demo/components/container/ghost.vue

@@ -1,7 +1,7 @@
 <template>
   <d2-container type="ghost">
     <el-card shadow="never" style="width: 50%;">
-      <d2-markdown :md="doc"/>
+      <d2-markdown :source="doc"/>
     </el-card>
   </d2-container>
 </template>

src/pages/demo/components/icon/select.vue

@@ -40,8 +40,8 @@ export default {
 <style lang="scss" scoped>
 @import '~@/assets/style/public.scss';
 .title-group {
-  margin-top: $margin;
+  margin-top: 20px;
-  margin-bottom: $margin / 2;
+  margin-bottom: 10px;
   &:first-child {
     margin-top: 0px;
   }

src/pages/demo/components/layout/grid.vue

@@ -94,9 +94,6 @@ export default {
     .el-card {
       height: 100%;
       @extend %unable-select;
-      // .el-card__header {
-      //   padding: 8px $margin;
-      // }
     }
     .vue-resizable-handle {
       opacity: .3;

src/pages/demo/components/layout/splitpane.vue

@@ -1,6 +1,6 @@
 <template>
   <d2-container>
-    <template slot="header">基本示例</template>
+    <template slot="header">区域划分</template>
     <div style="height: 400px; margin: -16px;">
       <SplitPane :min-percent='20' :default-percent='30' split="vertical">
         <template slot="paneL"><div style="margin: 10px;">左</div></template>

src/pages/demo/components/markdown/source.vue

@@ -1,7 +1,7 @@
 <template>
   <d2-container>
-    <template slot="header">效果演示</template>
+    <template slot="header">指定资源</template>
-    <d2-markdown :md="doc"/>
+    <d2-markdown :source="doc"/>
   </d2-container>
 </template>
 

src/pages/demo/components/markdown/url.vue

@@ -0,0 +1,6 @@
+<template>
+  <d2-container>
+    <template slot="header">异步加载文件</template>
+    <d2-markdown url="/static/md/demo.md"/>
+  </d2-container>
+</template>

src/pages/demo/plugins/day/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <d2-container type="full">
+    <template slot="header">
+      <el-button @click="handleReset">重新设置基础时间 this.now = dayjs()</el-button>
+    </template>
+    <h1 class="d2-mt-0">当前时间</h1>
+    <el-row :gutter="20" class="d2-mt">
+      <el-col :span="8"><el-card shadow="never"><d2-highlight slot="header" :code="`now.format('YYYY年M月D日 HH:mm:ss')`"/>{{now.format('YYYY年M月D日 HH:mm:ss')}}</el-card></el-col>
+    </el-row>
+    <h1>获取</h1>
+    <el-row :gutter="20" class="d2-mt">
+      <el-col :span="6"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//获取年\nnow.year()`"/>{{now.year()}}</el-card></el-col>
+      <el-col :span="6"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//获取月\nnow.month()`"/>{{now.month()}}</el-card></el-col>
+      <el-col :span="6"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//获取日\nnow.date()`"/>{{now.date()}}</el-card></el-col>
+      <el-col :span="6"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//获取星期\nnow.day()`"/>{{now.day()}}</el-card></el-col>
+      <el-col :span="6"><el-card shadow="never"><d2-highlight slot="header" :code="`//获取小时\nnow.hour()`"/>{{now.hour()}}</el-card></el-col>
+      <el-col :span="6"><el-card shadow="never"><d2-highlight slot="header" :code="`//获取分钟\nnow.minute()`"/>{{now.minute()}}</el-card></el-col>
+      <el-col :span="6"><el-card shadow="never"><d2-highlight slot="header" :code="`//获取秒\nnow.second()`"/>{{now.second()}}</el-card></el-col>
+      <el-col :span="6"><el-card shadow="never"><d2-highlight slot="header" :code="`//获取毫秒\nnow.millisecond()`"/>{{now.millisecond()}}</el-card></el-col>
+    </el-row>
+    <h1>设置</h1>
+    <el-row :gutter="20" class="d2-mt">
+      <el-col :span="8"><el-card shadow="never"><d2-highlight slot="header" :code="`//设置月份\nnow.set('month', 6).month()`"/>{{now.set('month', 6).month()}}</el-card></el-col>
+      <el-col :span="8"><el-card shadow="never"><d2-highlight slot="header" :code="`//设置秒\nnow.set('second', 30).second()`"/>{{now.set('second', 30).second()}}</el-card></el-col>
+      <el-col :span="8"><el-card shadow="never"><d2-highlight slot="header" :code="`//设置小时\nnow.set('hour', 4).hour()`"/>{{now.set('hour', 4).hour()}}</el-card></el-col>
+    </el-row>
+    <h1>操作</h1>
+    <el-row :gutter="20" class="d2-mt">
+      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//增加\nnow.add(1, 'day').format('YYYY年M月D日 HH:mm:ss')`"/>{{now.add(1, 'day').format('YYYY年M月D日 HH:mm:ss')}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//减少\nnow.subtract(7, 'year').format('YYYY年M月D日 HH:mm:ss')`"/>{{now.subtract(7, 'year').format('YYYY年M月D日 HH:mm:ss')}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never"><d2-highlight slot="header" :code="`//开头时间\nnow.startOf('year').format('YYYY年M月D日 HH:mm:ss')`"/>{{now.startOf('year').format('YYYY年M月D日 HH:mm:ss')}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never"><d2-highlight slot="header" :code="`//末尾时间\nnow.endOf('month').format('YYYY年M月D日 HH:mm:ss')`"/>{{now.endOf('month').format('YYYY年M月D日 HH:mm:ss')}}</el-card></el-col>
+    </el-row>
+    <h1>显示</h1>
+    <el-row :gutter="20" class="d2-mt">
+      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//格式化\nnow.format('YYYY-M-D HH:mm:ss')`"/>{{now.format('YYYY-M-D HH:mm:ss')}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//时间差\nnow.diff(now.subtract(1, 'day'), 'days')`"/>{{now.diff(now.subtract(1, 'day'), 'days')}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//Unix 时间戳 (毫秒)\nnow.valueOf()`"/>{{now.valueOf()}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//Unix 时间戳 (秒)\nnow.unix()`"/>{{now.unix()}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//天数 (月)\nnow.daysInMonth()`"/>{{now.daysInMonth()}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//Date 对象\nnow.toDate()`"/>{{now.toDate()}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//数组\nnow.toArray()`"/>{{now.toArray()}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//序列化 Dayjs 对象时会返回 ISO 8601 格式的字符串\nnow.toJSON()`"/>{{now.toJSON()}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//ISO 8601 字符串\nnow.toISOString()`"/>{{now.toISOString()}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//字符串\nnow.toString()`"/>{{now.toString()}}</el-card></el-col>
+      <el-col :span="24"><el-card shadow="never"><d2-highlight slot="header" :code="`//对象\nnow.toObject()`"/>{{now.toObject()}}</el-card></el-col>
+    </el-row>
+    <h1>查询</h1>
+    <el-row :gutter="20" class="d2-mt">
+      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//是否之前\nnow.isBefore(now.add(1, 'day'))`"/>{{now.isBefore(now.add(1, 'day'))}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//是否之前\nnow.isBefore(now.subtract(1, 'day'))`"/>{{now.isBefore(now.subtract(1, 'day'))}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//是否相同\nnow.isSame(now)`"/>{{now.isSame(now)}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//是否相同\nnow.isSame(now.add(1, 'day'))`"/>{{now.isSame(now.add(1, 'day'))}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never"><d2-highlight slot="header" :code="`//是否之后\nnow.isAfter(now.add(1, 'day'))`"/>{{now.isAfter(now.add(1, 'day'))}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never"><d2-highlight slot="header" :code="`//是否之后\nnow.isAfter(now.subtract(1, 'day'))`"/>{{now.isAfter(now.subtract(1, 'day'))}}</el-card></el-col>
+    </el-row>
+    <template slot="footer">
+      <d2-demo-link-btn title="依赖" :link="link"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+export default {
+  data () {
+    return {
+      link: 'https://github.com/iamkun/dayjs',
+      now: dayjs()
+    }
+  },
+  methods: {
+    handleReset () {
+      this.now = dayjs()
+    }
+  }
+}
+</script>

src/pages/demo/plugins/mock/components/d2-demo-mock-card.vue

@@ -47,7 +47,7 @@ export default {
 <style lang="scss" scoped>
 @import '~@/assets/style/public.scss';
 .col {
-  padding: $margin;
+  padding: 20px;
   border-radius: 4px;
   border-width: 1px;
   border-style: solid;

src/pages/demo/plugins/mock/dpd.vue

@@ -2,7 +2,7 @@
   <d2-container type="ghost">
     <el-card shadow="never" class="d2-mb">
       <d2-demo-page-header slot="header" title="数据占位符"/>
-      <d2-markdown :md="doc"/>
+      <d2-markdown :source="doc"/>
     </el-card>
     <d2-demo-mock-card
       v-for="(item, index) in settingDPD"

src/pages/demo/plugins/mock/dtd.vue

@@ -2,7 +2,7 @@
   <d2-container type="ghost">
     <el-card shadow="never" class="d2-mb">
       <d2-demo-page-header slot="header" title="数据模板"/>
-      <d2-markdown :md="doc"/>
+      <d2-markdown :source="doc"/>
     </el-card>
     <d2-demo-mock-card
       v-for="(item, index) in settingDTD"

src/pages/demo/plugins/timeago/index.vue

@@ -1,70 +0,0 @@
-<template>
-  <d2-container type="ghost">
-    <el-card shadow="never" class="d2-mb">
-      <div class="d2-text-center">
-        <h1 style="font-size: 30px;">您在{{openPageDateAgo}}打开的此页面</h1>
-        <p style="font-size: 10px;">请稍等一下 10秒后会开始自动刷新</p>
-      </div>
-    </el-card>
-    <el-card shadow="never">
-      <div class="d2-text-center">
-        <h1 style="font-size: 30px;">{{dateTimeRangeAgo}}</h1>
-        <el-date-picker
-          v-model="dateTimeRange"
-          type="datetimerange"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期">
-        </el-date-picker>
-      </div>
-    </el-card>
-  </d2-container>
-</template>
-
-<script>
-import timeago from 'timeago.js'
-export default {
-  data () {
-    return {
-      // 打开页面时间
-      openPageDate: new Date(),
-      // 打开页面已经过去的时间
-      openPageDateAgo: '',
-      // 打开页面时间计时器
-      dateTimeRangeTimer: null,
-      // 起止时间
-      dateTimeRange: [new Date(2018, 0, 1, 0, 0), new Date()],
-      // 上面起止时间的计算结果
-      dateTimeRangeAgo: ''
-    }
-  },
-  mounted () {
-    // 刷新打开页面过去的时间
-    this.refreshOpenPageDateAgo()
-    this.dateTimeRangeTimer = setInterval(this.refreshOpenPageDateAgo, 1000)
-    // 刷新起止时间的计算结果
-    this.refreshDateTimeRangeAgo()
-  },
-  beforeDestroy () {
-    // 清空计时器
-    clearInterval(this.dateTimeRangeTimer)
-  },
-  watch: {
-    dateTimeRange () {
-      // 刷新起止时间的计算结果
-      this.refreshDateTimeRangeAgo()
-    }
-  },
-  methods: {
-    // 计算打开页面过了多久
-    refreshOpenPageDateAgo () {
-      this.openPageDateAgo = timeago().format(this.openPageDate, 'zh_CN')
-    },
-    // 计算起止时间间隔
-    refreshDateTimeRangeAgo () {
-      const timeagoInstance = timeago(this.dateTimeRange[1])
-      this.dateTimeRangeAgo = timeagoInstance.format(this.dateTimeRange[0], 'zh_CN')
-    }
-  }
-}
-</script>

src/plugin/open/index.js

@@ -0,0 +1,8 @@
+export default {
+  install (Vue, options) {
+    // 打开一个url
+    Vue.prototype.$open = (url = 'https://github.com/FairyEver') => {
+      window.open(url)
+    }
+  }
+}

src/router/index.js

@@ -40,7 +40,8 @@ const routes = [
       { path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/components/index/index.vue') },
       { path: 'layout/grid', name: `${pre}layout-grid`, component: () => import('@/pages/demo/components/layout/grid.vue') },
       { path: 'layout/splitpane', name: `${pre}layout-splitpane`, component: () => import('@/pages/demo/components/layout/splitpane.vue') },
-      { path: 'markdown', name: `${pre}markdown`, component: () => import('@/pages/demo/components/markdown/index.vue') }
+      { path: 'markdown/source', name: `${pre}markdown-source`, component: () => import('@/pages/demo/components/markdown/source.vue') },
+      { path: 'markdown/url', name: `${pre}markdown-url`, component: () => import('@/pages/demo/components/markdown/url.vue') }
     ])('demo-components-')
   },
   {
@@ -52,6 +53,7 @@ const routes = [
     children: (pre => [
       { path: 'build', name: `${pre}build`, component: () => import('@/pages/demo/plugins/build/index.vue') },
       { path: 'clipboard-polyfill', name: `${pre}clipboard-polyfill`, component: () => import('@/pages/demo/plugins/clipboard-polyfill/index.vue') },
+      { path: 'day', name: `${pre}day`, component: () => import('@/pages/demo/plugins/day/index.vue') },
       { path: 'export/table', name: `${pre}export-table`, component: () => import('@/pages/demo/plugins/export/table.vue') },
       { path: 'export/txt', name: `${pre}export-txt`, component: () => import('@/pages/demo/plugins/export/txt.vue') },
       { path: 'i18n/demo1', name: `${pre}i18n-demo1`, component: () => import('@/pages/demo/plugins/i18n/demo1.vue') },
@@ -62,8 +64,7 @@ const routes = [
       { path: 'js-cookie', name: `${pre}js-cookie`, component: () => import('@/pages/demo/plugins/js-cookie/index.vue') },
       { path: 'mock/ajax', name: `${pre}mock-ajax`, component: () => import('@/pages/demo/plugins/mock/ajax.vue') },
       { path: 'mock/dpd', name: `${pre}mock-dpd`, component: () => import('@/pages/demo/plugins/mock/dpd.vue') },
-      { path: 'mock/dtd', name: `${pre}mock-dtd`, component: () => import('@/pages/demo/plugins/mock/dtd.vue') },
+      { path: 'mock/dtd', name: `${pre}mock-dtd`, component: () => import('@/pages/demo/plugins/mock/dtd.vue') }
-      { path: 'timeago', name: `${pre}timeago`, component: () => import('@/pages/demo/plugins/timeago/index.vue') }
     ])('demo-plugins-')
   },
   {

static/md/demo.md

@@ -0,0 +1,23 @@
+# 一级标题
+
+| ID | Name | Email |
+| --- | --- | --- |
+| 0001 | FairyEver | 1711467488@qq.com |
+
+```
+alert('Hello World')
+```
+
+一般引用
+
+> 引用文字
+
+分享一个我很早前的一副设计作品 [in Lofter](http://fairyever.lofter.com/post/16ff00_6796fe8) 借此演示百度云链接的显示优化
+
+> https://pan.baidu.com/s/1kW6uUwB
+
+设计源文件
+
+> 链接: https://pan.baidu.com/s/1ggFW21l 密码: 877y
+
+[https://github.com/FairyEver](https://github.com/FairyEver)