:sparkles: 添加新特性。缓存监控，redis web 终端

package.json

@@ -29,6 +29,7 @@
     "vue-json-editor": "^1.2.3",
     "vue-json-tree-view": "^2.1.4",
     "vue-router": "^3.0.2",
+    "vue-terminal": "^1.1.0",
     "vuex": "^3.0.1"
   },
   "devDependencies": {

src/api/monitor/monitor.js

@@ -0,0 +1,33 @@
+/*
+ *    Copyright (c) 2018-2025, lengleng All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *
+ * Redistributions of source code must retain the above copyright notice,
+ * this list of conditions and the following disclaimer.
+ * Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ * Neither the name of the pig4cloud.com developer nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ * Author: lengleng (wangiegie@gmail.com)
+ */
+
+import request from '@/router/axios'
+
+export function fetchInfo(q) {
+  return request({
+    url: '/monitor/redis/info',
+    method: 'get'
+  })
+}
+
+export function fetchExec(query) {
+  return request({
+    url: '/monitor/redis/exec',
+    method: 'get',
+    params: query
+  })
+}

src/page/index/index.vue

@@ -38,7 +38,6 @@
   import sidebar from './sidebar/'
   import admin from '@/util/admin';
   import {validatenull} from '@/util/validate';
-  import {calcDate} from '@/util/date.js';
   import {getStore} from '@/util/store.js';
   import SockJS from 'sockjs-client';
   import Stomp from 'stompjs';
@@ -57,6 +56,8 @@
         refreshLock: false,
         //刷新token的时间
         refreshTime: '',
+        // 计时器
+        timer: '',
       }
     },
     created() {
@@ -65,6 +66,7 @@
     },
     destroyed() {
       clearInterval(this.refreshTime)
+      clearInterval(this.timer)
       this.disconnect()
     },
     mounted() {

src/views/monitor/redis/terminal.vue

@@ -0,0 +1,165 @@
+<template>
+  <vue-terminal style="width:50%;height:1000px;margin:0 auto"
+                :task-list="taskList"
+                :command-list="commandList"
+                title="redis-cli"
+                :greeting="greeting"
+                :prompt="prompt"
+                :showHelpMessage="showHelpMessage"
+                :unknownCommandMessage="unknownCommandMessage"
+                :showInitialCd="showInitialCd"
+  />
+</template>
+
+<script>
+  import VueTerminal from 'vue-terminal';
+  import {fetchExec} from '@/api/monitor/monitor'
+
+  export default {
+    name: "terminal",
+    components: {VueTerminal},
+    data: function () {
+      return {
+        greeting: '欢迎使用pigx redis-cli',
+        prompt: 'pigx-redis:6379>',
+        showInitialCd: false,
+        showHelpMessage: false,
+        unknownCommandMessage: {
+          type: 'error',
+          label: 'Error',
+          message: '不支持该命令，输出help 查看支持列表'
+        },
+        taskList: {
+          get: {
+            description: 'Get the value of a key | get key',
+            get(pushToList, input) {
+              const p = new Promise(resolve => {
+                fetchExec(Object.assign({
+                  command: input,
+                })).then((response) => {
+                  resolve({type: response.data.msg, label: response.data.msg, message: response.data.data})
+                })
+              })
+              return p
+            }
+          },
+          hget: {
+            description: 'Get the value of a hash field | hget key field',
+            hget(pushToList, input) {
+              const p = new Promise(resolve => {
+                fetchExec(Object.assign({
+                  command: input,
+                })).then((response) => {
+                  resolve({type: response.data.msg, label: response.data.msg, message: response.data.data})
+                })
+              })
+              return p
+            }
+          },
+          hgetall: {
+            description: 'Get all the fields and values in a hash | hgetall key',
+            hgetall(pushToList, input) {
+              const p = new Promise(resolve => {
+                fetchExec(Object.assign({
+                  command: input,
+                })).then((response) => {
+                  resolve({type: response.data.msg, label: response.data.msg, message: response.data.data})
+                })
+              })
+              return p
+            }
+          },
+          lrange: {
+            description: 'Get a range of elements from a list | lrange key start end',
+            lrange(pushToList, input) {
+              const p = new Promise(resolve => {
+                fetchExec(Object.assign({
+                  command: input,
+                })).then((response) => {
+                  resolve({type: response.data.msg, label: response.data.msg, message: response.data.data})
+                })
+              })
+              return p
+            }
+          },
+          llen: {
+            description: 'Get the length of a list | llen key',
+            llen(pushToList, input) {
+              const p = new Promise(resolve => {
+                fetchExec(Object.assign({
+                  command: input,
+                })).then((response) => {
+                  resolve({type: response.data.msg, label: response.data.msg, message: response.data.data})
+                })
+              })
+              return p
+            }
+          },
+          scan: {
+            description: 'Incrementally iterate the keys space | scan index ',
+            ttl(pushToList, input) {
+              const p = new Promise(resolve => {
+                fetchExec(Object.assign({
+                  command: input,
+                })).then((response) => {
+                  resolve({type: response.data.msg, label: response.data.msg, message: response.data.data})
+                })
+              })
+              return p
+            }
+          },
+          ttl: {
+            description: 'Get the time to live for a key | ttl key',
+            ttl(pushToList, input) {
+              const p = new Promise(resolve => {
+                fetchExec(Object.assign({
+                  command: input,
+                })).then((response) => {
+                  resolve({type: response.data.msg, label: response.data.msg, message: response.data.data})
+                })
+              })
+              return p
+            }
+          },
+          dbsize: {
+            description: 'Return the number of keys in the selected database',
+            dbsize(pushToList, input) {
+              const p = new Promise(resolve => {
+                fetchExec(Object.assign({
+                  command: input,
+                })).then((response) => {
+                  resolve({type: response.data.msg, label: response.data.msg, message: response.data.data})
+                })
+              })
+              return p
+            }
+          },
+          defaultTask: {
+            description: '默认任务，系统内置',
+            defaultTask() {
+              const p = new Promise(resolve => {
+                resolve({type: 'success', label: 'Success', message: '详细使用请输入 help'})
+              })
+              return p
+            }
+          }
+        },
+        commandList: {
+          desc: {
+            description: '命令行特别说明',
+            messages: [
+              {message: 'web 端目前只开发查询类功能，避免安全问题，更多信息联系DBA操作'}
+            ]
+          }
+        }
+      }
+    },
+    methods: {
+      exec: function (input) {
+        fetchList(Object.assign({
+          command: input,
+        }))
+      }
+    }
+  }
+</script>

vue.config.js

@@ -63,6 +63,13 @@ module.exports = {
           '^/actuator': '/actuator'
         }
       },
+      '/monitor': {
+        target: url,
+        ws: true,
+        pathRewrite: {
+          '^/monitor': '/monitor'
+        }
+      },
       '/mp': {
         target: url,
         ws: true,