add:添加日志删除功能

nladmin-ui/src/views/lucene/api/lucene.js

@@ -14,10 +14,11 @@ export function getTagName() {
     method: 'post'
   })
 }
-export function deleteAllLog() {
+export function deleteAllLog(data) {
   return request({
     url: 'api/lucene/clearLogs',
-    method: 'post'
+    method: 'delete',
+    data
   })
 }
 

nladmin-ui/src/views/lucene/index.vue

@@ -59,20 +59,41 @@
           <el-button type="primary" size="mini" @click="queryData">
             {{ $t('common.Query') }}
           </el-button>
+          <el-button type="danger" size="mini" @click="clearDialogVisible = true">
+            清除日志
+          </el-button>
         </el-form-item>
       </el-form>
     </div>
+    <el-dialog
+      title="清除日志"
+      :visible.sync="clearDialogVisible"
+      width="360px"
+    >
+      <el-radio-group v-model="clearOption" class="clear-log-options">
+        <el-radio label="all">全部删除</el-radio>
+        <el-radio :label="3">保留3天</el-radio>
+        <el-radio :label="5">保留5天</el-radio>
+        <el-radio :label="7">保留7天</el-radio>
+      </el-radio-group>
+      <span slot="footer">
+        <el-button size="mini" @click="clearDialogVisible = false">取 消</el-button>
+        <el-button type="danger" size="mini" :loading="clearLoading" @click="handleClearLogs">
+          确 定
+        </el-button>
+      </span>
+    </el-dialog>
     <!--表格渲染-->
     <el-card shadow="hover" style="width: 100%" class="log-warpper">
       <div class="log-list">
         <div v-for="(log, index) in logs" :key="index" class="log-item">
           <div class="log-meta">
-            <span v-if="log.requestTime" class="log-time log-badge log-badge-time">{{ log.requestTime }}</span>
+            <span v-if="log.requestTime" class="log-tag log-time">{{ log.requestTime }}</span>
             <span class="log-level" :class="`log-level-${getLevelClass(log.logLevel)}`">{{ log.logLevel || 'UNKNOWN' }}</span>
-            <span v-if="log.requestIp" class="log-ip log-badge log-badge-ip">IP: {{ log.requestIp }}</span>
-            <span v-if="log.requestMethod" class="log-method log-badge log-badge-method">{{ log.requestMethod }}</span>
-            <span v-if="log.traceId && log.traceId.trim()" class="log-trace log-badge log-badge-trace">traceId: {{ log.traceId }}</span>
-            <span v-if="log.thread" class="log-thread log-badge log-badge-thread">{{ log.thread }}</span>
+            <span v-if="log.requestIp" class="log-tag log-request-ip">{{ log.requestIp }}</span>
+            <span v-if="log.requestMethod" class="log-tag log-request-method">{{ log.requestMethod }}</span>
+            <span v-if="log.traceId && log.traceId.trim()" class="log-tag log-trace">traceId: {{ log.traceId }}</span>
+            <span v-if="log.thread" class="log-tag log-thread">{{ log.thread }}</span>
           </div>
           <div class="log-message" v-html="log.messageHtml" />
         </div>
@@ -120,6 +141,9 @@ export default {
       rules: {},
       logs: [],
       tagList: [],
+      clearDialogVisible: false,
+      clearLoading: false,
+      clearOption: 3,
       query: {
         traceId: '',
         requestMethod: '',
@@ -166,11 +190,25 @@ export default {
         requestIp: item && item.requestIp,
         requestMethod: item && item.requestMethod,
         logLevel: item && item.logLevel,
+        logger: item && item.logger,
+        system: item && item.system,
         thread: item && item.thread,
         traceId: item && item.traceId,
         messageHtml: ansi_up.ansi_to_html(rawMessage)
       }
     },
+    handleClearLogs() {
+      const retainDays = this.clearOption === 'all' ? 0 : this.clearOption
+      this.clearLoading = true
+      luceneOperation.deleteAllLog({ retainDays }).then(() => {
+        this.$message.success('日志清除成功')
+        this.clearDialogVisible = false
+        this.query.page = 1
+        this.queryData()
+      }).finally(() => {
+        this.clearLoading = false
+      })
+    },
     queryData() {
       if (this.query.createTime && this.query.createTime.length === 2) {
         this.query.startTime = this.query.createTime[0]
@@ -192,6 +230,12 @@ export default {
 </script>
 
 <style scoped>
+.clear-log-options {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
 .log-list {
   width: 100%;
 }
@@ -214,52 +258,45 @@ export default {
   color: #606266;
 }
 
-.log-badge {
+.log-tag {
   display: inline-flex;
   align-items: center;
+  max-width: 100%;
   padding: 0 8px;
   line-height: 22px;
   border-radius: 11px;
   border: 1px solid transparent;
+  word-break: break-all;
 }
 
-.log-time,
-.log-ip,
-.log-method,
-.log-thread,
-.log-trace {
-  line-height: 20px;
-}
-
-.log-badge-time {
+.log-time {
   color: #606266;
   background: #f4f4f5;
   border-color: #dcdfe6;
 }
 
-.log-badge-ip {
+.log-request-ip {
   color: #7c4dff;
   background: #f3edff;
-  border-color: #d9c8ff;
+  border-color: #d9ccff;
 }
 
-.log-badge-method {
+.log-request-method {
   color: #0f766e;
   background: #ecfdf5;
-  border-color: #b7ebd3;
-  font-weight: 500;
+  border-color: #a7f3d0;
 }
 
-.log-badge-thread {
+.log-thread {
   color: #8e44ad;
-  background: #f8f0ff;
-  border-color: #e2cfff;
+  background: #f5eef8;
+  border-color: #d7bde2;
 }
 
-.log-badge-trace {
-  color: #c05621;
-  background: #fff7ed;
-  border-color: #fbd38d;
+.log-trace {
+  color: #1f2d3d;
+  background: #ecf5ff;
+  border-color: #b3d8ff;
 }
 
 .log-level {