审计日志相关功能

xzl-admin/src/main/java/com/xzl/web/controller/system/AuditLogController.java

@@ -0,0 +1,46 @@
+package com.xzl.web.controller.system;
+
+import java.util.List;
+import javax.servlet.http.HttpServletResponse;
+
+import org.springframework.security.access.prepost.PreAuthorize;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.PutMapping;
+import org.springframework.web.bind.annotation.DeleteMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import com.xzl.common.annotation.Log;
+import com.xzl.common.core.controller.BaseController;
+import com.xzl.common.core.domain.AjaxResult;
+import com.xzl.common.enums.BusinessType;
+import com.xzl.system.domain.AuditLog;
+import com.xzl.system.service.IAuditLogService;
+import com.xzl.common.utils.poi.ExcelUtil;
+import com.xzl.common.core.page.TableDataInfo;
+
+/**
+ * 数据操审计日志记录Controller
+ *
+ * @author xzl
+ * @date 2024-01-23
+ */
+@RestController
+@RequestMapping("/system/auditlog")
+public class AuditLogController extends BaseController {
+  @Autowired
+  private IAuditLogService auditLogService;
+
+  /**
+   * 查询数据操审计日志记录列表
+   */
+  @GetMapping("/list")
+  public TableDataInfo list(AuditLog auditLog) {
+    startPage();
+    List<AuditLog> list = auditLogService.selectAuditLogList(auditLog);
+    return getDataTable(list);
+  }
+}

xzl-admin/src/main/java/com/xzl/web/utils/AuditLogUtils.java

@@ -0,0 +1,170 @@
+package com.xzl.web.utils;
+
+import com.alibaba.fastjson.JSON;
+import com.xzl.common.utils.DateUtils;
+import com.xzl.common.utils.file.FileUtils;
+import com.xzl.web.model.dataGovernance.entity.SysDataLog;
+import org.apache.commons.collections.MapUtils;
+
+import java.io.BufferedReader;
+import java.io.File;
+import java.io.FileFilter;
+import java.io.FileInputStream;
+import java.io.FileNotFoundException;
+import java.io.FileOutputStream;
+import java.io.FileReader;
+import java.io.IOException;
+import java.sql.Connection;
+import java.sql.Date;
+import java.sql.DriverManager;
+import java.sql.PreparedStatement;
+import java.sql.SQLException;
+import java.sql.Statement;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Map;
+import java.util.zip.GZIPInputStream;
+
+public class AuditLogUtils {
+
+
+  public static String getFileName(String f) {
+    String fname = "";
+    int i = f.lastIndexOf('.');
+
+    if (i > 0 && i < f.length() - 1) {
+      fname = f.substring(0, i);
+    }
+    return fname;
+  }
+
+  public static List<String> read(File logfile) {
+    List<String> data = new ArrayList<>();
+    // 按行读日志
+    try {
+      // 创建FileReader和BufferedReader对象来读取日志文件
+      FileReader fileReader = new FileReader(logfile);
+      BufferedReader bufferedReader = new BufferedReader(fileReader);
+      // 逐行读取日志文件内容并分析处理
+      String line;
+      while ((line = bufferedReader.readLine()) != null) {
+        data.add(line);
+      }
+      // 关闭文件流
+      bufferedReader.close();
+      fileReader.close();
+    } catch (IOException e) {
+      e.printStackTrace();
+    }
+    return data;
+  }
+
+  public static List<String> uncompress(File gzfile) {
+    List<String> data = new ArrayList<>();
+    // 解压文件
+    GZIPInputStream in = null;
+    try {
+      in = new GZIPInputStream(new FileInputStream(gzfile));
+      System.out.println("Open the output file.");
+      String outFileName = getFileName(gzfile.getPath());
+      FileOutputStream out = null;
+      try {
+        out = new FileOutputStream(outFileName);
+      } catch (FileNotFoundException e) {
+        System.err.println("Could not write to file. " + outFileName);
+      }
+
+      System.out.println("Transfering bytes from compressed file to the output file.");
+      byte[] buf = new byte[1024];
+      int len;
+      while ((len = in.read(buf)) > 0) {
+        out.write(buf, 0, len);
+      }
+
+      System.out.println("Closing the file and stream");
+      in.close();
+      out.close();
+
+      // 删除 gz文件
+      FileUtils.deleteFile(gzfile.getPath());
+      return read(new File(outFileName));
+    } catch (IOException e) {
+      e.printStackTrace();
+      System.exit(1);
+    }
+    return data;
+  }
+
+  public static void main(String[] args) {
+    String logPath = "/usr/local/file";
+    /*
+    File logDir = new File(logPath);
+    if (logDir.exists()) {
+      File[] files = logDir.listFiles((o) -> o.getName().toLowerCase().endsWith(".gz"));
+      for (File gzfile : files) {
+        List<Map> data = uncompress(gzfile);
+        System.out.println(data.size());
+      }
+    }
+    */
+//    List<String> data = read(new File(logPath, "mysql-audit.json-10.70.192.124-20240117000101"));
+    List<String> data = read(new File(logPath, "mysql-audit.json-10.70.192.124-20240118000101"));
+//    System.out.println(data.size());
+    long beginTime = System.currentTimeMillis();
+    saveLog(data);
+    System.out.println("耗时 : " + (System.currentTimeMillis() - beginTime) / 1000 + " 秒");
+  }
+
+
+  private static void saveLog(List<String> data) {
+    // 连接数据库
+
+    int count = 1000;
+    Connection conn = null;
+    try {
+      Class.forName("com.mysql.cj.jdbc.Driver");
+      conn = DriverManager.getConnection("jdbc:mysql://10.70.192.124:3306/xtdb?allowMultiQueries=true&useUnicode=true&characterEncoding=UTF-8&useSSL=false", "audit", "xtyc@2023@xzl");
+      // 开始事务
+      conn.setAutoCommit(false);
+      String sql = "INSERT INTO audit_log (log_content, user, ip, method, create_time) VALUE (?,?,?,?,?)";
+      PreparedStatement ps = conn.prepareStatement(sql);
+      int size = data.size();
+      for (int i = 0; i < size; i++) {
+        // 添加到批处理队列
+        String line = data.get(i);
+        Map row = JSON.parseObject(line);
+        ps.setString(1, line);
+        ps.setString(2, MapUtils.getString(row, "user"));
+        ps.setString(3, MapUtils.getString(row, "ip"));
+        ps.setString(4, MapUtils.getString(row, "cmd"));
+        ps.setString(5, DateUtils.parseDateToStr(DateUtils.YYYY_MM_DD_HH_MM_SS, new Date(Long.valueOf(MapUtils.getString(row, "date")))));
+        ps.addBatch();
+        if (i % count == 0) {
+          int[] result = ps.executeBatch();
+          conn.commit();
+          ps.clearBatch();
+          System.out.println("已提交 " + result.length + " 条记录");
+        }
+      }
+      int[] result = ps.executeBatch();
+      System.out.println("已提交 " + result.length + " 条记录");
+      // 结束事务并自动提交更改
+      conn.commit();
+    } catch (SQLException | ClassNotFoundException e) {
+      e.printStackTrace();
+      // 发生错误时回滚事务
+      try {
+        conn.rollback();
+      } catch (SQLException ex) {
+        ex.printStackTrace();
+      }
+    } finally {
+      // 关闭连接
+      try {
+        conn.close();
+      } catch (SQLException e) {
+        e.printStackTrace();
+      }
+    }
+  }
+}

xzl-system/src/main/java/com/xzl/system/domain/AuditLog.java

@@ -0,0 +1,98 @@
+package com.xzl.system.domain;
+
+import com.xzl.common.annotation.Excel;
+import com.xzl.common.core.domain.BaseEntity;
+import org.apache.commons.lang3.builder.ToStringBuilder;
+import org.apache.commons.lang3.builder.ToStringStyle;
+import org.springframework.data.annotation.Transient;
+
+/**
+ * 数据操审计日志记录对象 audit_log
+ *
+ * @author xzl
+ * @date 2024-01-23
+ */
+public class AuditLog extends BaseEntity {
+  private static final long serialVersionUID = 1L;
+
+  /**
+   * 日志主键
+   */
+  private Long logId;
+
+  /**
+   * 日志内容
+   */
+  @Excel(name = "日志内容")
+  private String logContent;
+
+  /**
+   * 操作人员ID
+   */
+  @Excel(name = "操作人员ID")
+  private String user;
+
+  /**
+   * 主机地址
+   */
+  @Excel(name = "主机地址")
+  private String ip;
+
+  /**
+   * 调用方法路径
+   */
+  @Excel(name = "调用方法路径")
+  private String method;
+
+  public void setLogId(Long logId) {
+    this.logId = logId;
+  }
+
+  public Long getLogId() {
+    return logId;
+  }
+
+  public void setLogContent(String logContent) {
+    this.logContent = logContent;
+  }
+
+  public String getLogContent() {
+    return logContent;
+  }
+
+  public void setUser(String user) {
+    this.user = user;
+  }
+
+  public String getUser() {
+    return user;
+  }
+
+  public void setIp(String ip) {
+    this.ip = ip;
+  }
+
+  public String getIp() {
+    return ip;
+  }
+
+  public void setMethod(String method) {
+    this.method = method;
+  }
+
+  public String getMethod() {
+    return method;
+  }
+
+  @Override
+  public String toString() {
+    return new ToStringBuilder(this, ToStringStyle.MULTI_LINE_STYLE)
+      .append("logId", getLogId())
+      .append("logContent", getLogContent())
+      .append("user", getUser())
+      .append("ip", getIp())
+      .append("method", getMethod())
+      .append("createTime", getCreateTime())
+      .toString();
+  }
+}

xzl-system/src/main/java/com/xzl/system/mapper/AuditLogMapper.java

@@ -0,0 +1,61 @@
+package com.xzl.system.mapper;
+
+import java.util.List;
+import com.xzl.system.domain.AuditLog;
+
+/**
+ * 数据操审计日志记录Mapper接口
+ * 
+ * @author xzl
+ * @date 2024-01-23
+ */
+public interface AuditLogMapper 
+{
+    /**
+     * 查询数据操审计日志记录
+     * 
+     * @param logId 数据操审计日志记录主键
+     * @return 数据操审计日志记录
+     */
+    public AuditLog selectAuditLogByLogId(Long logId);
+
+    /**
+     * 查询数据操审计日志记录列表
+     * 
+     * @param auditLog 数据操审计日志记录
+     * @return 数据操审计日志记录集合
+     */
+    public List<AuditLog> selectAuditLogList(AuditLog auditLog);
+
+    /**
+     * 新增数据操审计日志记录
+     * 
+     * @param auditLog 数据操审计日志记录
+     * @return 结果
+     */
+    public int insertAuditLog(AuditLog auditLog);
+
+    /**
+     * 修改数据操审计日志记录
+     * 
+     * @param auditLog 数据操审计日志记录
+     * @return 结果
+     */
+    public int updateAuditLog(AuditLog auditLog);
+
+    /**
+     * 删除数据操审计日志记录
+     * 
+     * @param logId 数据操审计日志记录主键
+     * @return 结果
+     */
+    public int deleteAuditLogByLogId(Long logId);
+
+    /**
+     * 批量删除数据操审计日志记录
+     * 
+     * @param logIds 需要删除的数据主键集合
+     * @return 结果
+     */
+    public int deleteAuditLogByLogIds(Long[] logIds);
+}

xzl-system/src/main/java/com/xzl/system/service/IAuditLogService.java

@@ -0,0 +1,61 @@
+package com.xzl.system.service;
+
+import java.util.List;
+import com.xzl.system.domain.AuditLog;
+
+/**
+ * 数据操审计日志记录Service接口
+ * 
+ * @author xzl
+ * @date 2024-01-23
+ */
+public interface IAuditLogService 
+{
+    /**
+     * 查询数据操审计日志记录
+     * 
+     * @param logId 数据操审计日志记录主键
+     * @return 数据操审计日志记录
+     */
+    public AuditLog selectAuditLogByLogId(Long logId);
+
+    /**
+     * 查询数据操审计日志记录列表
+     * 
+     * @param auditLog 数据操审计日志记录
+     * @return 数据操审计日志记录集合
+     */
+    public List<AuditLog> selectAuditLogList(AuditLog auditLog);
+
+    /**
+     * 新增数据操审计日志记录
+     * 
+     * @param auditLog 数据操审计日志记录
+     * @return 结果
+     */
+    public int insertAuditLog(AuditLog auditLog);
+
+    /**
+     * 修改数据操审计日志记录
+     * 
+     * @param auditLog 数据操审计日志记录
+     * @return 结果
+     */
+    public int updateAuditLog(AuditLog auditLog);
+
+    /**
+     * 批量删除数据操审计日志记录
+     * 
+     * @param logIds 需要删除的数据操审计日志记录主键集合
+     * @return 结果
+     */
+    public int deleteAuditLogByLogIds(Long[] logIds);
+
+    /**
+     * 删除数据操审计日志记录信息
+     * 
+     * @param logId 数据操审计日志记录主键
+     * @return 结果
+     */
+    public int deleteAuditLogByLogId(Long logId);
+}

xzl-system/src/main/java/com/xzl/system/service/impl/AuditLogServiceImpl.java

@@ -0,0 +1,89 @@
+package com.xzl.system.service.impl;
+
+import java.util.List;
+
+import com.xzl.common.utils.DateUtils;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import com.xzl.system.mapper.AuditLogMapper;
+import com.xzl.system.domain.AuditLog;
+import com.xzl.system.service.IAuditLogService;
+
+/**
+ * 数据操审计日志记录Service业务层处理
+ *
+ * @author xzl
+ * @date 2024-01-23
+ */
+@Service
+public class AuditLogServiceImpl implements IAuditLogService {
+  @Autowired
+  private AuditLogMapper auditLogMapper;
+
+  /**
+   * 查询数据操审计日志记录
+   *
+   * @param logId 数据操审计日志记录主键
+   * @return 数据操审计日志记录
+   */
+  @Override
+  public AuditLog selectAuditLogByLogId(Long logId) {
+    return auditLogMapper.selectAuditLogByLogId(logId);
+  }
+
+  /**
+   * 查询数据操审计日志记录列表
+   *
+   * @param auditLog 数据操审计日志记录
+   * @return 数据操审计日志记录
+   */
+  @Override
+  public List<AuditLog> selectAuditLogList(AuditLog auditLog) {
+    return auditLogMapper.selectAuditLogList(auditLog);
+  }
+
+  /**
+   * 新增数据操审计日志记录
+   *
+   * @param auditLog 数据操审计日志记录
+   * @return 结果
+   */
+  @Override
+  public int insertAuditLog(AuditLog auditLog) {
+    auditLog.setCreateTime(DateUtils.getNowDate());
+    return auditLogMapper.insertAuditLog(auditLog);
+  }
+
+  /**
+   * 修改数据操审计日志记录
+   *
+   * @param auditLog 数据操审计日志记录
+   * @return 结果
+   */
+  @Override
+  public int updateAuditLog(AuditLog auditLog) {
+    return auditLogMapper.updateAuditLog(auditLog);
+  }
+
+  /**
+   * 批量删除数据操审计日志记录
+   *
+   * @param logIds 需要删除的数据操审计日志记录主键
+   * @return 结果
+   */
+  @Override
+  public int deleteAuditLogByLogIds(Long[] logIds) {
+    return auditLogMapper.deleteAuditLogByLogIds(logIds);
+  }
+
+  /**
+   * 删除数据操审计日志记录信息
+   *
+   * @param logId 数据操审计日志记录主键
+   * @return 结果
+   */
+  @Override
+  public int deleteAuditLogByLogId(Long logId) {
+    return auditLogMapper.deleteAuditLogByLogId(logId);
+  }
+}

xzl-system/src/main/resources/mapper/system/AuditLogMapper.xml

@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE mapper
+PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
+"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.xzl.system.mapper.AuditLogMapper">
+    
+    <resultMap type="AuditLog" id="AuditLogResult">
+        <result property="logId"    column="log_id"    />
+        <result property="logContent"    column="log_content"    />
+        <result property="user"    column="user"    />
+        <result property="ip"    column="ip"    />
+        <result property="method"    column="method"    />
+        <result property="createTime"    column="create_time"    />
+    </resultMap>
+
+    <sql id="selectAuditLogVo">
+        select log_id, log_content, user, ip, method, create_time from audit_log
+    </sql>
+
+    <select id="selectAuditLogList" parameterType="AuditLog" resultMap="AuditLogResult">
+        <include refid="selectAuditLogVo"/>
+        <where>  
+            <if test="logContent != null  and logContent != ''"> and log_content = #{logContent}</if>
+            <if test="user != null  and user != ''"> and user = #{user}</if>
+            <if test="ip != null  and ip != ''"> and ip = #{ip}</if>
+            <if test="method != null  and method != ''"> and method = #{method}</if>
+            <if test="params.beginTime != null and params.beginTime != ''"><!-- 开始时间检索 -->
+                AND date_format(create_time,'%y%m%d') &gt;= date_format(#{params.beginTime},'%y%m%d')
+            </if>
+            <if test="params.endTime != null and params.endTime != ''"><!-- 结束时间检索 -->
+                AND date_format(create_time,'%y%m%d') &lt;= date_format(#{params.endTime},'%y%m%d')
+            </if>
+        </where>
+    </select>
+    
+    <select id="selectAuditLogByLogId" parameterType="Long" resultMap="AuditLogResult">
+        <include refid="selectAuditLogVo"/>
+        where log_id = #{logId}
+    </select>
+        
+    <insert id="insertAuditLog" parameterType="AuditLog" useGeneratedKeys="true" keyProperty="logId">
+        insert into audit_log
+        <trim prefix="(" suffix=")" suffixOverrides=",">
+            <if test="logContent != null">log_content,</if>
+            <if test="user != null">user,</if>
+            <if test="ip != null">ip,</if>
+            <if test="method != null">method,</if>
+            <if test="createTime != null">create_time,</if>
+         </trim>
+        <trim prefix="values (" suffix=")" suffixOverrides=",">
+            <if test="logContent != null">#{logContent},</if>
+            <if test="user != null">#{user},</if>
+            <if test="ip != null">#{ip},</if>
+            <if test="method != null">#{method},</if>
+            <if test="createTime != null">#{createTime},</if>
+         </trim>
+    </insert>
+
+    <update id="updateAuditLog" parameterType="AuditLog">
+        update audit_log
+        <trim prefix="SET" suffixOverrides=",">
+            <if test="logContent != null">log_content = #{logContent},</if>
+            <if test="user != null">user = #{user},</if>
+            <if test="ip != null">ip = #{ip},</if>
+            <if test="method != null">method = #{method},</if>
+            <if test="createTime != null">create_time = #{createTime},</if>
+        </trim>
+        where log_id = #{logId}
+    </update>
+
+    <delete id="deleteAuditLogByLogId" parameterType="Long">
+        delete from audit_log where log_id = #{logId}
+    </delete>
+
+    <delete id="deleteAuditLogByLogIds" parameterType="String">
+        delete from audit_log where log_id in 
+        <foreach item="logId" collection="array" open="(" separator="," close=")">
+            #{logId}
+        </foreach>
+    </delete>
+</mapper>

xzl-ui/src/api/system/auditlog.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 查询数据操审计日志记录列表
+export function listLog(query) {
+  return request({
+    url: '/system/auditlog/list',
+    method: 'get',
+    params: query
+  })
+}

xzl-ui/src/views/system/auditlog/index.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="操作人员" prop="user">
+        <el-input
+          v-model="queryParams.user"
+          placeholder="请输入数据库用户"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="调用方法" prop="method">
+        <el-select
+          v-model="queryParams.method"
+          placeholder="请选择调用方法"
+          clearable
+          style="width: 240px"
+        >
+          <el-option
+            v-for="dict in dict.type.sys_auditlog_method"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间">
+        <el-date-picker
+          v-model="dateRange"
+          style="width: 240px"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+
+    <el-table v-loading="loading" :data="logList" @selection-change="handleSelectionChange">
+      <el-table-column label="日志内容" align="center" prop="logContent" width="550" :show-overflow-tooltip="true"/>
+      <el-table-column label="数据库用户" align="center" prop="user" />
+      <el-table-column label="IP地址" align="center" prop="ip" />
+      <el-table-column label="调用方法" align="center" prop="method" >
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_auditlog_method" :value="scope.row.method"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="160">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { listLog } from "@/api/system/auditlog";
+
+export default {
+  dicts: ['sys_auditlog_method'],
+  name: "Log",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 数据操审计日志记录表格数据
+      logList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        logContent: null,
+        user: null,
+        ip: null,
+        method: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      },
+      // 日期范围
+      dateRange: [],
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询数据操审计日志记录列表 */
+    getList() {
+      this.loading = true;
+      listLog(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+        this.logList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        logId: null,
+        logContent: null,
+        user: null,
+        ip: null,
+        method: null,
+        createTime: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.logId)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+  }
+};
+</script>