增加日期相关的 filter 和更新一些菜单的显示

Former-commit-id: bacfe4e86ce0599752cc74916bb9547add6b0725 [formerly bacfe4e86ce0599752cc74916bb9547add6b0725 [formerly bacfe4e86ce0599752cc74916bb9547add6b0725 [formerly bacfe4e86ce0599752cc74916bb9547add6b0725 [formerly f5ed703f2aefb46bd7a6dd7dbb6d141cd43dec08 [formerly b679a8fecf5a7d908d20d57b1098d9c4708574c3]]]]] Former-commit-id: 36c9337dc53258282bc83ed7b52a88c617a75a66 Former-commit-id: b418eed9356e5de890b70a8ccaa93ee1abbd30bf Former-commit-id: e06310cdc83cd1c614e523f33558d2cb303ca81f [formerly 20341d1ed3372bfe16f777a177710894ca29f378] Former-commit-id: 1795ddf1c595363c49c3d6530e2a552aa7906edd Former-commit-id: 38c0384164faa36103bc9ee5d881cdacf367bbb4 Former-commit-id: 0a13e600fb5a8add5a282304dc2f26d35e711572 Former-commit-id: 5845a0b7620bd23f145b02cbe0427eb351792e6a Former-commit-id: a8aeed67fd895c549600e636cf16094197c1891a
2018-12-16 12:25:41 +08:00
parent 5e16818f73
commit e20159debc
18 changed files with 385 additions and 8 deletions
--- a/src/filters/module.date.js
+++ b/src/filters/module.date.js
@@ -0,0 +1,98 @@
+// 日期时间相关 filter
+// https://github.com/iamkun/dayjs/blob/master/docs/zh-cn/API-reference.md
+
+import dayjs from 'dayjs'
+
+// 对象代理
+const P = Day => {
+  return new Proxy(Day, {
+    get (target, key) {
+      if (dayjs.isDayjs(target)) {
+        // 是 Dayjs 对象，正常返回
+        return target[key]
+      } else {
+        // 不是 Dayjs 对象
+        if (dayjs(target).isValid()) {
+          // 尝试帮用户解析成 Dayjs 对象
+          return dayjs(target)[key]
+        } else {
+          // 无法解析
+          return function () {
+            return '无效日期'
+          }
+        }
+      }
+    },
+    set (target, key, value) {
+      target[key] = value
+    }
+  })
+}
+
+const filters = {
+  // ---------- [ dayjs 解析 ] ----------
+  // 时间字符串 | Date 对象 | Unix 时间戳 (毫秒)
+  day: value => dayjs(value),
+  // Unix 时间戳 (秒)
+  day_unix: value => dayjs.unix(value),
+  // ---------- [ 获取 ] ----------
+  day_year: Day => P(Day).year(),
+  day_month: Day => P(Day).month(),
+  day_date: Day => P(Day).date(),
+  day_day: Day => P(Day).day(),
+  day_hour: Day => P(Day).hour(),
+  day_minute: Day => P(Day).minute(),
+  day_second: Day => P(Day).second(),
+  day_millisecond: Day => P(Day).millisecond(),
+  // ---------- [ 设置 ] ----------
+  // date | day | month | year | hour | minute | second | millisecond
+  // 对大小写不敏感
+  day_set: (Day, unit, value) => P(Day).set(unit, value),
+  // ---------- [ 操作 ] ----------
+  // 增加
+  day_add: (Day, value, unit) => P(Day).add(value, unit),
+  // 减少
+  day_subtract: (Day, value, unit) => P(Day).subtract(value, unit),
+  // 开头时间
+  day_startof: (Day, unit) => P(Day).startOf(unit),
+  // 末尾时间
+  day_endof: (Day, unit) => P(Day).endOf(unit),
+  // ---------- [ 显示 ] ----------
+  // 格式化
+  day_format: (Day, setting = 'YYYY-MM-DD HH:mm:ss') => P(Day).format(setting),
+  // 时间差
+  day_diff: (Day, Day2 = '', unit = 'millisecond', accurate = false) => P(Day).diff(dayjs(Day2), unit, accurate),
+  // Unix 时间戳 (毫秒)
+  day_value_millisecond: Day => P(Day).valueOf(),
+  // Unix 时间戳 (秒)
+  day_value_second: Day => P(Day).unix(),
+  // 月份的天数
+  day_days_in_month: Day => P(Day).daysInMonth(),
+  // Date 对象
+  day_to_date: Day => P(Day).toDate(),
+  // 数组
+  day_to_array: Day => P(Day).toArray(),
+  // JSON
+  day_to_json: Day => P(Day).toJSON(),
+  // ISO8601 格式
+  day_to_iso: Day => P(Day).toISOString(),
+  // 对象
+  day_to_object: Day => P(Day).toObject(),
+  // 字符
+  day_to_string: Day => P(Day).toString(),
+  // ---------- [ 查询 ] ----------
+  // 是否之前
+  day_is_before: (Day, Day2, unit = 'millisecond') => P(Day).isBefore(dayjs(Day2), unit),
+  // 是否之后
+  day_is_after: (Day, Day2, unit = 'millisecond') => P(Day).isAfter(dayjs(Day2), unit),
+  // 是否相同
+  day_is_same: (Day, Day2, unit = 'millisecond') => P(Day).isSame(dayjs(Day2), unit)
+}
+
+export default {
+  install: function (Vue) {
+    Object.keys(filters).forEach(name => {
+      Vue.filter(name, filters[name])
+    })
+  }
+}
--- a/src/menu/index.js
+++ b/src/menu/index.js
@@ -6,6 +6,8 @@ import demoComponents from './modules/demo-components'
 import demoCharts from './modules/demo-charts'
 // 组件库
 import demoElement from './modules/demo-element'
+// 组件库
+import demoFilters from './modules/demo-filters'
 // 试验台
 import demoPlayground from './modules/demo-playground'
 // 示例
@@ -21,6 +23,7 @@ export const menuAside = [
  demoPlugins,
  demoCharts,
  demoElement,
+  demoFilters,
  demoPlayground,
  demoBusiness,
  demoD2Crud,
@@ -40,6 +43,7 @@ export const menuHeader = [
    children: [
      demoD2Crud,
      demoComponents,
+      demoFilters,
      demoElement,
      demoCharts,
      demoPlugins,
--- a/src/menu/modules/demo-business.js
+++ b/src/menu/modules/demo-business.js
@@ -3,7 +3,7 @@ export default {
  title: '示例',
  icon: 'flask',
  children: (pre => [
-    { path: `${pre}index`, title: '示例首页', icon: 'home' },
+    { path: `${pre}index`, title: '示例', icon: 'home' },
    {
      title: '表格',
      icon: 'table',
--- a/src/menu/modules/demo-charts.js
+++ b/src/menu/modules/demo-charts.js
@@ -3,7 +3,7 @@ export default {
  title: '图表',
  icon: 'line-chart',
  children: (pre => [
-    { path: `${pre}index`, title: '图表首页', icon: 'home' },
+    { path: `${pre}index`, title: '图表', icon: 'home' },
    {
      path: `${pre}list`,
      title: '图表',
--- a/src/menu/modules/demo-components.js
+++ b/src/menu/modules/demo-components.js
@@ -3,7 +3,7 @@ export default {
  title: '内置组件',
  icon: 'puzzle-piece',
  children: (pre => [
-    { path: `${pre}index`, title: '扩展组件首页', icon: 'home' },
+    { path: `${pre}index`, title: '扩展组件', icon: 'home' },
    {
      path: `${pre}container`,
      title: '布局容器',
--- a/src/menu/modules/demo-d2-crud.js
+++ b/src/menu/modules/demo-d2-crud.js
@@ -3,7 +3,7 @@ export default {
  title: 'D2 CRUD',
  iconSvg: 'd2-crud',
  children: (pre => [
-    { path: `${pre}index`, title: 'D2 CRUD 首页', icon: 'home' },
+    { path: `${pre}index`, title: 'D2 CRUD ', icon: 'home' },
    {
      title: '基础功能',
      children: [
--- a/src/menu/modules/demo-element.js
+++ b/src/menu/modules/demo-element.js
@@ -3,7 +3,7 @@ export default {
  title: '基础组件库',
  icon: 'cubes',
  children: (pre => [
-    { path: `${pre}index`, title: '基础组件库首页', icon: 'home' },
+    { path: `${pre}index`, title: '基础组件库', icon: 'home' },
    {
      path: `${pre}basic`,
      title: '基础',
--- a/src/menu/modules/demo-filters.js
+++ b/src/menu/modules/demo-filters.js
@@ -0,0 +1,9 @@
+export default {
+  path: '/demo/filters',
+  title: '内置过滤器',
+  icon: 'flask',
+  children: (pre => [
+    { path: `${pre}index`, title: '内置过滤器', icon: 'home' },
+    { path: `${pre}day`, title: '日期和时间', icon: 'calendar' }
+  ])('/demo/filters/')
+}
--- a/src/menu/modules/demo-frame.js
+++ b/src/menu/modules/demo-frame.js
@@ -3,7 +3,7 @@ export default {
  title: '内嵌网页',
  icon: 'globe',
  children: (pre => [
-    { path: `${pre}index`, title: 'Frame 首页', icon: 'home' },
+    { path: `${pre}index`, title: 'Frame ', icon: 'home' },
    { path: `${pre}d2-doc`, title: 'D2Admin 中文文档', iconSvg: 'd2-admin' },
    { path: `${pre}html`, title: '静态 HTML', icon: 'code' }
  ])('/demo/frame/')
--- a/src/menu/modules/demo-playground.js
+++ b/src/menu/modules/demo-playground.js
@@ -3,7 +3,7 @@ export default {
  title: '试验台',
  icon: 'flask',
  children: (pre => [
-    { path: `${pre}index`, title: '试验台首页', icon: 'home' },
+    { path: `${pre}index`, title: '试验台', icon: 'home' },
    {
      title: 'svg 菜单图标',
      iconSvg: 'd2-admin',
--- a/src/menu/modules/demo-plugins.js
+++ b/src/menu/modules/demo-plugins.js
@@ -3,7 +3,7 @@ export default {
  title: '插件',
  icon: 'plug',
  children: (pre => [
-    { path: `${pre}index`, title: '插件首页', icon: 'home' },
+    { path: `${pre}index`, title: '插件', icon: 'home' },
    {
      path: `${pre}mock`,
      title: '模拟数据',
--- a/src/pages/demo/filters/day/components/code-and-result.vue
+++ b/src/pages/demo/filters/day/components/code-and-result.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="d2-mb-10">
+    <el-button-group>
+      <el-button
+        v-for="(label, index) in labelList"
+        :key="index"
+        :class="buttonClass(index)"
+        size="mini"
+        type="primary"
+        @click="handleClip(label)">
+        {{label}}
+      </el-button>
+    </el-button-group>
+    <d2-icon name="arrow-right" class="code-and-result--arrow-right"/>
+    {{value}}
+  </div>
+</template>
+
+<script>
+import clipboard from 'clipboard-polyfill'
+export default {
+  props: {
+    label: {
+      default: ''
+    },
+    value: {
+      default: ''
+    }
+  },
+  computed: {
+    labelList () {
+      return this.label.split('|')
+    }
+  },
+  methods: {
+    buttonClass (index) {
+      if (index === 0) {
+        return 'code-and-result--button__first'
+      } else if (index === this.labelList.length - 1) {
+        return 'code-and-result--button__last'
+      } else {
+        return 'code-and-result--button'
+      }
+    },
+    handleClip (value) {
+      clipboard.writeText(value)
+      this.$notify({
+        title: '成功',
+        message: `${value} 已经复制到剪贴板`,
+        type: 'success'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.code-and-result--button {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+.code-and-result--button__first {
+  padding-right: 5px;
+  padding-left: 10px;
+}
+.code-and-result--button__last {
+  padding-left: 5px;
+  padding-right: 10px;
+}
+.code-and-result--arrow-right {
+  color: $color-info;
+  margin: 0px 20px;
+}
+.code-and-result--value {
+  line-height: 32px;
+}
+</style>
--- a/src/pages/demo/filters/day/components/code-title.vue
+++ b/src/pages/demo/filters/day/components/code-title.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <h1 class="code-title">{{title}}</h1>
+    <h2 class="code-title--sub">{{subTitle}}</h2>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    subTitle: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.code-title {
+  margin: 0px;
+  font-size: 24px;
+  font-weight: bold;
+  color: $color-text-main;
+  margin: 10px 0;
+  &:first-child {
+    margin-top: 0px;
+  }
+}
+.code-title--sub {
+  margin: 0px;
+  font-size: 12px;
+  font-weight: normal;
+  color: $color-text-sub;
+  margin: 10px 0;
+}
+</style>
--- a/src/pages/demo/filters/day/index.vue
+++ b/src/pages/demo/filters/day/index.vue
@@ -0,0 +1,95 @@
+<template>
+  <d2-container>
+    <div slot="header" flex="main:justify">
+      <el-date-picker size="small" type="datetime" v-model="value" placeholder="选择一个日期"/>
+      <el-button size="small" type="primary">value = {{value}}</el-button>
+    </div>
+    <code-title title="获取" sub-title="获取日期的指定部分"/>
+    <code-and-result label="value|day_year" :value="value|day_year"/>
+    <code-and-result label="value|day_month" :value="value|day_month"/>
+    <code-and-result label="value|day_date" :value="value|day_date"/>
+    <code-and-result label="value|day_day" :value="value|day_day"/>
+    <code-and-result label="value|day_hour" :value="value|day_hour"/>
+    <code-and-result label="value|day_minute" :value="value|day_minute"/>
+    <code-and-result label="value|day_second" :value="value|day_second"/>
+    <code-and-result label="value|day_millisecond" :value="value|day_millisecond"/>
+    <code-title title="设置" sub-title="设置日期指定部分的值"/>
+    <code-and-result label="value|day_set('year', 2020)|day_format('< YYYY > - MM - DD')" :value="value|day_set('year', 2020)|day_format('< YYYY > - MM - DD')"/>
+    <code-and-result label="value|day_set('month', 0)|day_format('YYYY - < MM > - DD')" :value="value|day_set('month', 0)|day_format('YYYY - < MM > - DD')"/>
+    <code-and-result label="value|day_set('date', 1)|day_format('YYYY - MM - < DD >')" :value="value|day_set('date', 1)|day_format('YYYY - MM - < DD >')"/>
+    <code-and-result label="value|day_set('hour', 0)|day_format('< HH > : mm : ss')" :value="value|day_set('hour', 0)|day_format('< HH > : mm : ss')"/>
+    <code-and-result label="value|day_set('minute', 0)|day_format('HH : < mm > : ss')" :value="value|day_set('minute', 0)|day_format('HH : < mm > : ss')"/>
+    <code-and-result label="value|day_set('second', 0)|day_format('HH : mm : < ss >')" :value="value|day_set('second', 0)|day_format('HH : mm : < ss >')"/>
+    <code-title title="增加" sub-title="增加时间并返回一个新的 Dayjs 对象"/>
+    <code-and-result label="value|day_add(1, 'year')|day_format('< YYYY > - MM - DD')" :value="value|day_add(1, 'year')|day_format('< YYYY > - MM - DD')"/>
+    <code-and-result label="value|day_add(1, 'month')|day_format('YYYY - < MM > - DD')" :value="value|day_add(1, 'month')|day_format('YYYY - < MM > - DD')"/>
+    <code-and-result label="value|day_add(1, 'day')|day_format('YYYY - MM - < DD >')" :value="value|day_add(1, 'day')|day_format('YYYY - MM - < DD >')"/>
+    <code-and-result label="value|day_add(1, 'hour')|day_format('< HH > : mm : ss')" :value="value|day_add(1, 'hour')|day_format('< HH > : mm : ss')"/>
+    <code-and-result label="value|day_add(1, 'minute')|day_format('HH : < mm > : ss')" :value="value|day_add(1, 'minute')|day_format('HH : < mm > : ss')"/>
+    <code-and-result label="value|day_add(1, 'second')|day_format('HH : mm : < ss >')" :value="value|day_add(1, 'second')|day_format('HH : mm : < ss >')"/>
+    <code-title title="减少" sub-title="减少时间并返回一个新的 Dayjs 对象"/>
+    <code-and-result label="value|day_subtract(1, 'year')|day_format('< YYYY > - MM - DD')" :value="value|day_subtract(1, 'year')|day_format('< YYYY > - MM - DD')"/>
+    <code-and-result label="value|day_subtract(1, 'month')|day_format('YYYY - < MM > - DD')" :value="value|day_subtract(1, 'month')|day_format('YYYY - < MM > - DD')"/>
+    <code-and-result label="value|day_subtract(1, 'day')|day_format('YYYY - MM - < DD >')" :value="value|day_subtract(1, 'day')|day_format('YYYY - MM - < DD >')"/>
+    <code-and-result label="value|day_subtract(1, 'hour')|day_format('< HH > : mm : ss')" :value="value|day_subtract(1, 'hour')|day_format('< HH > : mm : ss')"/>
+    <code-and-result label="value|day_subtract(1, 'minute')|day_format('HH : < mm > : ss')" :value="value|day_subtract(1, 'minute')|day_format('HH : < mm > : ss')"/>
+    <code-and-result label="value|day_subtract(1, 'second')|day_format('HH : mm : < ss >')" :value="value|day_subtract(1, 'second')|day_format('HH : mm : < ss >')"/>
+    <code-title title="开头时间" sub-title="返回当前时间的开头时间的 Dayjs 对象，如月份的第一天"/>
+    <code-and-result label="value|day_startof('year')|day_format" :value="value|day_startof('year')|day_format"/>
+    <code-and-result label="value|day_startof('month')|day_format" :value="value|day_startof('month')|day_format"/>
+    <code-and-result label="value|day_startof('date')|day_format" :value="value|day_startof('date')|day_format"/>
+    <code-and-result label="value|day_startof('hour')|day_format" :value="value|day_startof('hour')|day_format"/>
+    <code-and-result label="value|day_startof('minute')|day_format" :value="value|day_startof('minute')|day_format"/>
+    <code-title title="末尾时间" sub-title="返回当前时间的末尾时间的 Dayjs 对象，如月份的最后一天"/>
+    <code-and-result label="value|day_endof('year')|day_format" :value="value|day_endof('year')|day_format"/>
+    <code-and-result label="value|day_endof('month')|day_format" :value="value|day_endof('month')|day_format"/>
+    <code-and-result label="value|day_endof('date')|day_format" :value="value|day_endof('date')|day_format"/>
+    <code-and-result label="value|day_endof('hour')|day_format" :value="value|day_endof('hour')|day_format"/>
+    <code-and-result label="value|day_endof('minute')|day_format" :value="value|day_endof('minute')|day_format"/>
+    <code-title title="显示" sub-title="格式化 Dayjs 对象并展示"/>
+    <code-and-result label="value|day_format" :value="value|day_format"/>
+    <code-and-result label="value|day_format('YY-MM-DD')" :value="value|day_format('YY-MM-DD')"/>
+    <code-and-result label="value|day_format('YYYY-M-D')" :value="value|day_format('YYYY-M-D')"/>
+    <code-and-result label="value|day_format('YYYY-M-D H:m:s')" :value="value|day_format('YYYY-M-D H:m:s')"/>
+    <code-title title="时间差" sub-title="获取两个 Dayjs 对象的时间差，默认毫秒"/>
+    <code-and-result label="value|day_diff('2012-10-31', 'year')" :value="value|day_diff('2012-10-31', 'year')"/>
+    <code-and-result label="value|day_diff('2012-10-31', 'month')" :value="value|day_diff('2012-10-31', 'month')"/>
+    <code-and-result label="value|day_diff('2012-10-31', 'day')" :value="value|day_diff('2012-10-31', 'day')"/>
+    <code-and-result label="value|day_diff('2012-10-31', 'hour')" :value="value|day_diff('2012-10-31', 'hour')"/>
+    <code-and-result label="value|day_diff('2012-10-31', 'minute')" :value="value|day_diff('2012-10-31', 'minute')"/>
+    <code-and-result label="value|day_diff('2012-10-31', 'second')" :value="value|day_diff('2012-10-31', 'second')"/>
+    <code-title title="Unix 时间戳" sub-title="返回毫秒和秒"/>
+    <code-and-result label="value|day_value_millisecond" :value="value|day_value_millisecond"/>
+    <code-and-result label="value|day_value_second" :value="value|day_value_second"/>
+    <code-title title="月份天数" sub-title="返回传入日期月份的天数"/>
+    <code-and-result label="value|day_days_in_month" :value="value|day_days_in_month"/>
+    <code-title title="处理为其它格式" sub-title="原生的 Date 对象，数组，json，ios 标准，对象，字符串"/>
+    <code-and-result label="value|day_to_date" :value="value|day_to_date"/>
+    <code-and-result label="value|day_to_array" :value="value|day_to_array"/>
+    <code-and-result label="value|day_to_json" :value="value|day_to_json"/>
+    <code-and-result label="value|day_to_iso" :value="value|day_to_iso"/>
+    <code-and-result label="value|day_to_object" :value="value|day_to_object"/>
+    <code-and-result label="value|day_to_string" :value="value|day_to_string"/>
+    <code-title title="查询" sub-title="是否之前，之后，或者相同"/>
+    <code-and-result label="value|day_is_before('2020-1-1')" :value="value|day_is_before('2020-1-1')"/>
+    <code-and-result label="value|day_is_after('2012-1-1')" :value="value|day_is_after('2012-1-1')"/>
+    <code-and-result label="value|day_is_same(new Date())" :value="value|day_is_same(new Date())"/>
+    <code-and-result label="value|day_is_same(new Date(), 'date')" :value="value|day_is_same(new Date(), 'date')"/>
+  </d2-container>
+</template>
+
+<script>
+import codeTitle from './components/code-title'
+import codeAndResult from './components/code-and-result'
+export default {
+  components: {
+    codeTitle,
+    codeAndResult
+  },
+  data () {
+    return {
+      value: new Date()
+    }
+  }
+}
+</script>
--- a/src/pages/demo/filters/index/index.vue
+++ b/src/pages/demo/filters/index/index.vue
@@ -0,0 +1,22 @@
+<template>
+  <d2-container :filename="filename" type="ghost">
+    <d2-module-index-banner slot="header" v-bind="banner"/>
+    <d2-module-index-menu :menu="menu"/>
+  </d2-container>
+</template>
+
+<script>
+import menu from '@/menu/modules/demo-filters'
+export default {
+  data () {
+    return {
+      filename: __filename,
+      menu,
+      banner: {
+        title: 'FILTERS',
+        subTitle: '内置过滤器'
+      }
+    }
+  }
+}
+</script>
--- a/src/plugin/d2admin/index.js
+++ b/src/plugin/d2admin/index.js
@@ -7,6 +7,8 @@ import 'flex.css'
 import '@/components'
 // svg 图标
 import '@/assets/svg-icons'
+// 过滤器
+import d2VueFiltersDateModule from '@/filters/module.date'
 // 功能插件
 import pluginError from '@/plugin/error'
 import pluginExport from '@/plugin/export'
@@ -29,6 +31,8 @@ export default {
    Vue.prototype.$buildTime = process.env.VUE_APP_BUILD_TIME
    // Element
    Vue.use(ElementUI)
+    // 过滤器 日期模块
+    Vue.use(d2VueFiltersDateModule)
    // 插件
    Vue.use(pluginError)
    Vue.use(pluginExport)
--- a/src/router/modules/filters.js
+++ b/src/router/modules/filters.js
@@ -0,0 +1,25 @@
+import layoutHeaderAside from '@/layout/header-aside'
+
+const meta = { auth: true }
+
+export default {
+  path: '/demo/filters',
+  name: 'demo-filters',
+  meta,
+  redirect: { name: 'demo-filters-index' },
+  component: layoutHeaderAside,
+  children: (pre => [
+    {
+      path: 'index',
+      name: `${pre}index`,
+      component: () => import('@/pages/demo/filters/index'),
+      meta: { ...meta, title: '过滤器首页' }
+    },
+    {
+      path: 'day',
+      name: `${pre}day`,
+      component: () => import('@/pages/demo/filters/day'),
+      meta: { ...meta, title: '日期和时间' }
+    }
+  ])('demo-filters-')
+}
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -5,6 +5,7 @@ import plugins from './modules/plugins'
 import charts from './modules/charts'
 import components from './modules/components'
 import element from './modules/element'
+import filters from './modules/filters'
 import business from './modules/business'

 import layoutHeaderAside from '@/layout/header-aside'
@@ -60,6 +61,7 @@ const frameIn = [
  charts,
  components,
  element,
+  filters,
  business
 ]