优化日志显示页面

Former-commit-id: 14cb7cb392149c54db6d4d4e31cb3e4083fbc838 [formerly 14cb7cb392149c54db6d4d4e31cb3e4083fbc838 [formerly 14cb7cb392149c54db6d4d4e31cb3e4083fbc838 [formerly 14cb7cb392149c54db6d4d4e31cb3e4083fbc838 [formerly b4354d85cc1708aefade894a572c7c43cc1277a5 [formerly aba1ea86b235c25c24929198b57653ba3f278037]]]]]
Former-commit-id: 1b8861760a739469fa52f81ea95e92071b160380
Former-commit-id: 9d8bb76d2a57885529d8679b6a8ba870462ef576
Former-commit-id: c332d85b1553b2cd47feabaea442a27e6864d0dd [formerly 1f8c38491cc31a430b4a9fbcdb659c80f070f276]
Former-commit-id: 180c06ea08c275798eea50b6bb32aee7adb35ac5
Former-commit-id: afa3eebab977573725423f80b8692b15688487a7
Former-commit-id: e83926983c777be0f0b17e820cfc2c5033635d25
Former-commit-id: d539ddf492d6f6d65c799b3c79de5df233f77c2e
Former-commit-id: 6118829b8661097dd42f4b4fa9fd8257b6e129ed

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

@@ -8,8 +8,8 @@ export default {
     // 错误日志
     // + 日志条目的属性
     //   - message 必须 日志信息
-    //   - time 必须 日志记录时间
     //   - type 非必须 类型 success | warning | info | error
+    //   - time 必须 日志记录时间
     //   - meta 非必须 其它携带信息
     list: []
   },
@@ -32,16 +32,15 @@ export default {
   actions: {
     /**
      * @description 添加一个日志
-     * @param {Object} param type {String} 类型
+     * @param {String} param message {String} 信息
-     * @param {Object} param err {Error} 错误对象
+     * @param {String} param type {String} 类型
-     * @param {Object} param instance {Object} vue 实例
+     * @param {Object} param meta {Object} 附带的信息
-     * @param {Object} param info {String} 信息
      */
     add ({ rootState, commit }, { message, type, meta }) {
       commit('add', {
         message,
-        time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
         type,
+        time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
         meta: {
           // 当前用户信息
           user: rootState.d2admin.user.info,

src/views/system/log/index.vue

@@ -9,24 +9,35 @@
         Upload
       </el-button>
     </template>
-    Log Page
+    <section class="page">
+      <p class="log" v-for="(log, logIndex) in list" :key="logIndex">
+        <span class="log-time">{{log.time}}</span>
+        <span class="log-message">{{log.message}}</span>
+      </p>
+    </section>
   </d2-container>
 </template>
 
 <script>
+import { mapState } from 'vuex'
 export default {
   data () {
     return {
       uploading: false
     }
   },
+  computed: {
+    ...mapState('d2admin/log', [
+      'list'
+    ])
+  },
   methods: {
     handleUpload () {
       this.uploading = true
       this.$notify({
         type: 'info',
         title: '日志上传',
-        message: '开始上传日志'
+        message: `开始上传${this.list.length}条日志`
       })
       setTimeout(() => {
         this.uploading = false
@@ -41,3 +52,29 @@ export default {
 }
 </script>
 
+<style lang="scss" scoped>
+.page {
+  .log {
+    margin: 4px -4px;
+    padding: 4px;
+    border-radius: 2px;
+    @extend %unable-select;
+    &:hover {
+      background-color: $color-bg;
+    }
+    &:first-child {
+      margin-top: 0px;
+    }
+    &:last-child {
+      margin-bottom: 0px;
+    }
+    .log-time {
+      color: $color-text-main;
+      margin-right: 10px;
+    }
+    .log-message {
+      color: $color-text-normal;
+    }
+  }
+}
+</style>