Merge branch 'feature/log_component' into develop

Former-commit-id: 9880ff489b2fbe7104cba5fe86a62366b4558955 [formerly 9880ff489b2fbe7104cba5fe86a62366b4558955 [formerly 9880ff489b2fbe7104cba5fe86a62366b4558955 [formerly 9880ff489b2fbe7104cba5fe86a62366b4558955 [formerly 18da9c4e7f8593ed39a54df780d76bccb944b932 [formerly 52e94695b43cdc0f706a9a43cda23d1856765005]]]]]
Former-commit-id: 4c335cedfede7838264f422953efb913374334df
Former-commit-id: c0b7992c8f2fea6f3531f7424c182af1e155d8eb
Former-commit-id: 2f9642cea24b066c0292d09648035dc4b62ced68 [formerly d3560f3e2033d4b9888bb595700c95e2d8a25715]
Former-commit-id: 6c61b46394cc8b9566f48994e3f299b49d24bd8c
Former-commit-id: 169e084c7396b47d1db033860a0b85765cef5677
Former-commit-id: 853fedbd0ff657053d14e0b7e7e005e0e2114790
Former-commit-id: 7363d63bebf72da296cfefd1e60b4bbf86474293
Former-commit-id: c78400cfb7b7874dd21486aceca5aef54bec7109

src/assets/style/public-class.scss

@@ -34,14 +34,6 @@
 .#{$prefix}-fr {
   float: right;
 }
-.#{$prefix}-clearfix:before,
-.#{$prefix}-clearfix:after {
-  display: table;
-  content: "";
-}
-.#{$prefix}-clearfix:after {
-  clear: both
-}
 
 // 边距相关
 $sizes: (0, 5, 10, 15, 20);

src/components/d2-highlight/index.vue

@@ -3,11 +3,12 @@
 </template>
 
 <script>
+// 相关文档
 // https://highlightjs.org/usage/
 // http://highlightjs.readthedocs.io/en/latest/api.html#configure-options
-import './styles/github-gist.css'
-import htmlFormat from './libs/htmlFormat'
 import highlight from 'highlight.js'
+import '../highlight-styles/github-gist.css'
+import htmlFormat from './libs/htmlFormat'
 export default {
   name: 'd2-highlight',
   props: {

src/components/d2-icon-select/index.vue

@@ -6,7 +6,7 @@
       :placement="placement"
       width="300"
       trigger="click">
-      <div class="d2-clearfix d2-mb-10" v-if="clearable">
+      <el-row type="flex" justify="end" class="d2-mb-10" v-if="clearable">
         <el-button
           type="danger"
           icon="el-icon-delete"
@@ -15,7 +15,7 @@
           @click="selectIcon()">
           清空
         </el-button>
-      </div>
+      </el-row>
       <el-input
         v-model="searchText"
         :clearable="true"

src/components/d2-icon-svg-select/index.vue

@@ -6,9 +6,7 @@
       :placement="placement"
       width="300"
       trigger="click">
-      <div
-        class="d2-clearfix d2-mb-10"
-        v-if="clearable">
+      <el-row type="flex" justify="end" class="d2-mb-10" v-if="clearable">
         <el-button
           type="danger"
           icon="el-icon-delete"
@@ -17,7 +15,7 @@
           @click="selectIcon()">
           清空
         </el-button>
-      </div>
+      </el-row>
       <el-input
         v-model="searchText"
         :clearable="true"

src/components/d2-markdown/index.vue

@@ -10,6 +10,7 @@
 <script>
 import marked from 'marked'
 import highlight from 'highlight.js'
+import '../highlight-styles/github-gist.css'
 import bandupan from './plugin/baidupan'
 import 'github-markdown-css'
 import { ComponentsMarkdownBase } from '@api/components.markdown'

src/layout/header-aside/components/header-error-log/components/list/components/ExpandItem/index.vue

@@ -1,30 +0,0 @@
-<template>
-  <div
-    class="d2-error-log-list__expand"
-    :class="className">
-    <p class="d2-error-log-list__expand-title">{{title}}</p>
-    <p class="d2-error-log-list__expand-value">{{value === '' ? '无数据' : value}}</p>
-    <slot/>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    type: {
-      default: 'log'
-    },
-    title: {
-      default: ''
-    },
-    value: {
-      default: ''
-    }
-  },
-  computed: {
-    className () {
-      return this.type === 'log' ? 'd2-error-log-list__expand--log' : 'd2-error-log-list__expand--error'
-    }
-  }
-}
-</script>

src/layout/header-aside/components/header-error-log/components/list/index.vue

@@ -1,178 +0,0 @@
-<template>
-  <el-table
-    :data="logReversed"
-    border
-    stripe
-    style="width: 100%"
-    size="mini">
-    <el-table-column type="expand">
-      <div slot-scope="{ row = {} }" class="d2-error-log-list__expand-group">
-        <expand-item
-          :type="row.type"
-          title="类型"
-          :value="row.type === 'log' ? '日志' : '异常'"/>
-        <expand-item
-          :type="row.type"
-          title="内容"
-          :value="row.info"/>
-        <expand-item
-          v-if="row.type === 'error'"
-          type="error"
-          title="报错组件"
-          :value="get(row, 'instance.$vnode.tag', '')"/>
-        <expand-item
-          v-if="row.type === 'error'"
-          type="error"
-          title="错误名称"
-          :value="get(row, 'err.name', '')"/>
-        <expand-item
-          v-if="row.type === 'error'"
-          type="error"
-          title="错误信息"
-          :value="get(row, 'err.message', '')"/>
-        <expand-item
-          v-if="row.type === 'error'"
-          type="error"
-          title="错误堆栈"
-          value="见下">
-          <div style="overflow: auto;">
-            <pre>{{stackBeautify(row.err)}}</pre>
-          </div>
-        </expand-item>
-        <expand-item
-          :type="row.type"
-          title="用户名"
-          :value="get(row, 'user.name', '')"/>
-        <expand-item
-          :type="row.type"
-          title="uuid"
-          :value="row.uuid"/>
-        <expand-item
-          :type="row.type"
-          title="token"
-          :value="row.token"/>
-        <expand-item
-          :type="row.type"
-          title="页面地址"
-          :value="row.url"/>
-        <expand-item
-          :type="row.type"
-          title="时间"
-          :value="row.time"/>
-      </div>
-    </el-table-column>
-    <el-table-column
-      prop="type"
-      label="类型"
-      width="80px"
-      align="center"
-      :filters="[
-        { text: '日志', value: 'log' },
-        { text: '异常', value: 'error' }
-      ]"
-      :filter-multiple="false"
-      :filter-method="filterType"
-      filter-placement="bottom">
-      <template slot-scope="scope">
-        <el-tag
-          v-if="get(scope, 'row.type') === 'error'"
-          size="mini"
-          type="danger">
-          <d2-icon name="bug"/> Bug
-        </el-tag>
-        <el-tag
-          v-else
-          size="mini"
-          type="info">
-          <d2-icon name="dot-circle-o"/> Log
-        </el-tag>
-      </template>
-    </el-table-column>
-    <el-table-column
-      label="地址"
-      prop="url"
-      width="140px"
-      :show-overflow-tooltip="true">
-    </el-table-column>
-    <el-table-column
-      label="内容"
-      prop="info"
-      :show-overflow-tooltip="true">
-    </el-table-column>
-    <el-table-column
-      label="错误类型"
-      width="140px"
-      :show-overflow-tooltip="true">
-      <template
-        slot-scope="scope">
-        {{get(scope, 'row.err.name', '')}}
-      </template>
-    </el-table-column>
-    <el-table-column
-      label="错误信息"
-      width="300px">
-      <template
-        slot-scope="scope">
-        {{get(scope, 'row.err.message', '')}}
-      </template>
-    </el-table-column>
-  </el-table>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import { get, cloneDeep } from 'lodash'
-import ExpandItem from './components/ExpandItem'
-export default {
-  name: 'd2-error-log-list',
-  components: {
-    ExpandItem
-  },
-  computed: {
-    ...mapState('d2admin', {
-      logList: state => state.log.list
-    }),
-    logReversed () {
-      return cloneDeep(this.logList).reverse()
-    }
-  },
-  methods: {
-    get,
-    filterType (value, row) {
-      return row.type === value
-    },
-    stackBeautify (err) {
-      return get(err, 'stack', '')
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.d2-error-log-list__expand-group {
-  .d2-error-log-list__expand {
-    padding-left: 20px;
-    margin-bottom: 10px;
-    &:last-child {
-      margin-bottom: 0px;
-    }
-    .d2-error-log-list__expand-title {
-      font-size: 16px;
-      font-weight: bold;
-      margin-top: 0px;
-      margin-bottom: 10px;
-    }
-    .d2-error-log-list__expand-value {
-      font-size: 12px;
-      margin-top: 0px;
-      margin-bottom: 0px;
-    }
-  }
-  .d2-error-log-list__expand--log {
-    border-left: 4px solid $color-info;
-  }
-  .d2-error-log-list__expand--error {
-    border-left: 4px solid $color-danger;
-  }
-}
-</style>

src/layout/header-aside/components/header-error-log/index.vue

@@ -1,82 +0,0 @@
-<template>
-  <div>
-    <el-tooltip
-      effect="dark"
-      :content="tooltipContent"
-      placement="bottom">
-      <el-button
-        class="d2-ml-0 d2-mr btn-text can-hover"
-        type="text"
-        @click="handleClick">
-        <el-badge
-          v-if="logLength > 0"
-          :max="99"
-          :value="logLengthError"
-          :is-dot="logLengthError === 0">
-          <d2-icon
-            :name="logLengthError === 0 ? 'dot-circle-o' : 'bug'"
-            style="font-size: 20px"/>
-        </el-badge>
-        <d2-icon
-          v-else
-          name="dot-circle-o"
-          style="font-size: 20px"/>
-      </el-button>
-    </el-tooltip>
-    <el-dialog
-      :title="tooltipContent"
-      :fullscreen="true"
-      :visible.sync="dialogVisible"
-      :append-to-body="true">
-      <div class="d2-mb-10">
-        <el-button type="danger" size="mini" @click="handleLogClean">
-          <d2-icon name="trash-o"/>
-          清空
-        </el-button>
-      </div>
-      <d2-error-log-list/>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { mapGetters, mapMutations } from 'vuex'
-import D2ErrorLogList from './components/list'
-export default {
-  components: {
-    D2ErrorLogList
-  },
-  data () {
-    return {
-      dialogVisible: false
-    }
-  },
-  computed: {
-    ...mapGetters('d2admin', {
-      logLength: 'log/length',
-      logLengthError: 'log/lengthError'
-    }),
-    tooltipContent () {
-      return this.logLength === 0
-        ? '没有日志或异常'
-        : `${this.logLength} 条日志${this.logLengthError > 0
-          ? ` | 包含 ${this.logLengthError} 个异常`
-          : ''}`
-    }
-  },
-  methods: {
-    ...mapMutations('d2admin/log', [
-      'clean'
-    ]),
-    handleClick () {
-      if (this.logLength > 0) {
-        this.dialogVisible = true
-      }
-    },
-    handleLogClean () {
-      this.dialogVisible = false
-      this.clean()
-    }
-  }
-}
-</script>

src/layout/header-aside/components/header-log/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-tooltip
+    effect="dark"
+    :content="tooltipContent"
+    placement="bottom">
+    <el-button
+      class="d2-ml-0 d2-mr btn-text can-hover"
+      type="text"
+      @click="handleClick">
+      <el-badge
+        v-if="logLength > 0"
+        :max="99"
+        :value="logLengthError"
+        :is-dot="logLengthError === 0">
+        <d2-icon
+          :name="logLengthError === 0 ? 'dot-circle-o' : 'bug'"
+          style="font-size: 20px"/>
+      </el-badge>
+      <d2-icon
+        v-else
+        name="dot-circle-o"
+        style="font-size: 20px"/>
+    </el-button>
+  </el-tooltip>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+export default {
+  computed: {
+    ...mapGetters('d2admin', {
+      logLength: 'log/length',
+      logLengthError: 'log/lengthError'
+    }),
+    tooltipContent () {
+      return this.logLength === 0
+        ? '没有日志或异常'
+        : `${this.logLength} 条日志${this.logLengthError > 0
+          ? ` | 包含 ${this.logLengthError} 个异常`
+          : ''}`
+    }
+  },
+  methods: {
+    ...mapMutations('d2admin/log', [
+      'clean'
+    ]),
+    handleClick () {
+      this.$router.push({
+        name: 'log'
+      })
+    }
+  }
+}
+</script>

src/layout/header-aside/layout.vue

@@ -27,7 +27,7 @@
         <div class="d2-header-right" flex-box="0">
           <!-- 如果你只想在开发环境显示这个按钮请添加 v-if="$env === 'development'" -->
           <d2-header-search @click="handleSearchClick"/>
-          <d2-header-error-log/>
+          <d2-header-log/>
           <d2-header-fullscreen/>
           <d2-header-theme/>
           <d2-header-size/>
@@ -89,7 +89,7 @@ import d2HeaderSearch from './components/header-search'
 import d2HeaderSize from './components/header-size'
 import d2HeaderTheme from './components/header-theme'
 import d2HeaderUser from './components/header-user'
-import d2HeaderErrorLog from './components/header-error-log'
+import d2HeaderLog from './components/header-log'
 import { mapState, mapGetters, mapActions } from 'vuex'
 import mixinSearch from './mixins/search'
 export default {
@@ -106,7 +106,7 @@ export default {
     d2HeaderSize,
     d2HeaderTheme,
     d2HeaderUser,
-    d2HeaderErrorLog
+    d2HeaderLog
   },
   data () {
     return {

src/libs/util.import.development.js

@@ -1 +1 @@
-module.exports = file => require('@/pages/' + file).default
+module.exports = file => require('@/views/' + file).default

src/libs/util.import.production.js

@@ -1 +1 @@
-module.exports = file => () => import('@/pages/' + file)
+module.exports = file => () => import('@/views/' + file)

src/pages/login/index.js

@@ -1,3 +0,0 @@
-import page from './page'
-
-export default page

src/plugin/log/index.js

@@ -4,17 +4,10 @@ import util from '@/libs/util'
 export default {
   install (Vue, options) {
     // 快速打印 log
-    Vue.prototype.$log = util.log
-    // 快速记录日志
-    Vue.prototype.$logAdd = function (info, show = true) {
-      // store 赋值
-      store.dispatch('d2admin/log/add', {
-        type: 'log',
-        info
-      })
-      // 显示在控制台
-      if (show && process.env.NODE_ENV === 'development') {
-        util.log.default(info)
+    Vue.prototype.$log = {
+      ...util.log,
+      push (data) {
+        store.dispatch('d2admin/log/add', data)
       }
     }
   }

src/router/routes.js

@@ -22,38 +22,38 @@ const frameIn = [
     redirect: { name: 'index' },
     component: layoutHeaderAside,
     children: [
-      // 首页 必须 name:index
+      // 首页
       {
         path: 'index',
         name: 'index',
         meta: {
           auth: true
         },
-        component: _import('index')
+        component: _import('system/index')
+      },
+      // 系统 前端日志
+      {
+        path: 'log',
+        name: 'log',
+        meta: {
+          title: '前端日志',
+          auth: true
+        },
+        component: _import('system/log')
       },
       // 刷新页面 必须保留
       {
         path: 'refresh',
         name: 'refresh',
         hidden: true,
-        component: {
-          beforeRouteEnter (to, from, next) {
-            next(instance => instance.$router.replace(from.fullPath))
-          },
-          render: h => h()
-        }
+        component: _import('system/function/refresh')
       },
       // 页面重定向 必须保留
       {
         path: 'redirect/:route*',
         name: 'redirect',
         hidden: true,
-        component: {
-          beforeRouteEnter (to, from, next) {
-            next(instance => instance.$router.replace(JSON.parse(from.params.route)))
-          },
-          render: h => h()
-        }
+        component: _import('system/function/redirect')
       }
     ]
   },
@@ -76,7 +76,7 @@ const frameOut = [
   {
     path: '/login',
     name: 'login',
-    component: _import('login')
+    component: _import('system/login')
   }
 ]
 
@@ -84,11 +84,10 @@ const frameOut = [
  * 错误页面
  */
 const errorPage = [
-  // 404
   {
     path: '*',
     name: '404',
-    component: _import('error-page-404')
+    component: _import('system/error/404')
   }
 ]
 

src/store/modules/d2admin/modules/log.js

@@ -1,11 +1,16 @@
 import dayjs from 'dayjs'
-import { get, toString } from 'lodash'
+import { get } from 'lodash'
 import util from '@/libs/util.js'
 
 export default {
   namespaced: true,
   state: {
     // 错误日志
+    // + 日志条目的属性
+    //   - message 必须 日志信息
+    //   - type 非必须 类型 success | warning | info | error
+    //   - time 必须 日志记录时间
+    //   - meta 非必须 其它携带信息
     list: []
   },
   getters: {
@@ -27,41 +32,39 @@ export default {
   actions: {
     /**
      * @description 添加一个日志
-     * @param {Object} param type {String} 类型
-     * @param {Object} param err {Error} 错误对象
-     * @param {Object} param instance {Object} vue 实例
-     * @param {Object} param info {String} 信息
+     * @param {String} param message {String} 信息
+     * @param {String} param type {String} 类型
+     * @param {Object} param meta {Object} 附带的信息
      */
-    add ({ state, rootState }, { type, err, instance, info }) {
-      // store 赋值
-      state.list.push(Object.assign({
-        // 记录类型 "log" or "error"
-        type: 'log',
-        // 信息
-        info: '',
-        // 错误对象
-        err: '',
-        // vue 实例
-        instance: '',
-        // 当前用户信息
-        user: rootState.d2admin.user.info,
-        // 当前用户的 uuid
-        uuid: util.cookies.get('uuid'),
-        // 当前的 token
-        token: util.cookies.get('token'),
-        // 当前地址
-        url: get(window, 'location.href', ''),
-        // 当前时间
-        time: dayjs().format('YYYY-M-D HH:mm:ss')
-      }, {
+    add ({ rootState, commit }, { message, type, meta }) {
+      commit('add', {
+        message,
         type,
-        err,
-        instance,
-        info: toString(info)
-      }))
+        time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+        meta: {
+          // 当前用户信息
+          user: rootState.d2admin.user.info,
+          // 当前用户的 uuid
+          uuid: util.cookies.get('uuid'),
+          // 当前的 token
+          token: util.cookies.get('token'),
+          // 当前地址
+          url: get(window, 'location.href', ''),
+          // 用户设置
+          ...meta
+        }
+      })
     }
   },
   mutations: {
+    /**
+     * @description 添加日志
+     * @param {Object} state vuex state
+     * @param {Object} log data
+     */
+    add (state, log) {
+      state.list.push(log)
+    },
     /**
      * @description 清空日志
      * @param {Object} state vuex state