Merge branch 'feature-console' of http://222.76.244.118:3000/Kane/vue-learning into feature-console

……

企业级管理系统/java/AdminSys/src/main/java/com/cpic/xim/web/controllers/FileUpload/FileUpload.java

@@ -0,0 +1,32 @@
+/*
+ * @Author: Kane
+ * @Date: 2023-01-22 23:11:26
+ * @LastEditors: Kane
+ * @LastEditTime: 2023-01-22 23:47:15
+ * @FilePath: \AdminSys\src\main\java\com\cpic\xim\web\controllers\FileUpload\FileUpload.java
+ * @Description: 用于接受上传文件的Controller。
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+ */
+
+package com.cpic.xim.web.controllers.FileUpload;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.multipart.MultipartFile;
+
+@SuppressWarnings( "unused" )
+@Controller
+@RequestMapping( path = "/file" )
+public class FileUpload
+{
+    @RequestMapping( path = "/file-upload.do" )
+    public void getUploadFile( @RequestParam( "task-name" ) String taskName,
+            @RequestParam( "file" ) MultipartFile[] files )
+    {
+        int fileCount = files.length;
+
+        return;
+    }
+}

企业级管理系统/java/AdminSys/src/main/java/com/cpic/xim/web/controllers/account/P13AccountCheckController.java

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-12-15 11:11:21
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-11 09:18:29
+ * @LastEditTime: 2023-01-17 23:28:21
  * @FilePath: \AdminSys\src\main\java\com\cpic\xim\web\controllers\account\P13AccountCheckController.java
  * @Description: P13账号验证用Controller。
  * 
@@ -30,7 +30,13 @@ import com.cpic.xim.myutils.account.LdapAccountCheck;
 public class P13AccountCheckController
 {
     /*****************************************************
-     * 
+     * 根据用户提供的P09工号或者P13账号密码，查找用户信息，并AD域服务器验证p13账号密码。
+     * 验证通过即返回人员信息。
+     * 验证不通过result.success值为false，并在message提供失败原因。
+     * @param param 由json格式转换的请求参数
+     * @param request
+     * @param response
+     * @return 返回一个P13AccountCheckResult对象，其中提供验证结果
      *****************************************************/
     @ResponseBody
     @RequestMapping( path = "/p13_account_check.do" )
@@ -54,7 +60,6 @@ public class P13AccountCheckController
             staff = null;
             result.setMessage( "人员工号或P13账号不存在！" );
             result.setSuccess( false );
-
         }
         catch ( ClassNotFoundException error )
         {
@@ -107,4 +112,3 @@ public class P13AccountCheckController
         return result;
     }
 }
-

企业级管理系统/java/AdminSys/src/main/java/com/cpic/xim/web/filters/token/TokenFilter.java

@@ -0,0 +1,40 @@
+/*
+ * @Author: Kane
+ * @Date: 2023-01-12 15:01:22
+ * @LastEditors: Kane
+ * @LastEditTime: 2023-01-13 09:23:55
+ * @FilePath: \AdminSys\src\main\java\com\cpic\xim\web\filters\token\TokenFilter.java
+ * @Description: 用于检查token的过滤器
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+ */
+package com.cpic.xim.web.filters.token;
+
+import java.io.IOException;
+import javax.servlet.Filter;
+import javax.servlet.FilterChain;
+import javax.servlet.ServletException;
+import javax.servlet.ServletRequest;
+import javax.servlet.ServletResponse;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+
+@SuppressWarnings( "unused")
+public class TokenFilter implements Filter
+{
+    /*****************************************************
+     * 
+     *****************************************************/
+    @Override
+    public void doFilter( ServletRequest req, ServletResponse resp, FilterChain chain )
+            throws ServletException, IOException
+    {
+        HttpServletRequest request = (HttpServletRequest) req;
+        HttpServletResponse response = (HttpServletResponse) resp;
+
+        String URI = request.getRequestURI();
+
+        chain.doFilter( request, response );
+    }
+}
+

企业级管理系统/java/AdminSys/src/main/webapp/WEB-INF/web.xml

@@ -1,4 +1,7 @@
-<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1">
+<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
+  version="3.1">
   <display-name>Archetype Created Web Application</display-name>
 
   <servlet>
@@ -24,6 +27,15 @@
     <url-pattern>*.do</url-pattern>
   </filter-mapping>
 
+  <filter>
+    <filter-name>token-filter</filter-name>
+    <filter-class>com.cpic.xim.web.filters.token.TokenFilter</filter-class>
+  </filter>
+  <filter-mapping>
+    <filter-name>token-filter</filter-name>
+    <url-pattern>*.do</url-pattern>
+  </filter-mapping>
+
   <!-- 配置文件路径参数 -->
   <context-param>
     <param-name>config_file_location</param-name>

企业级管理系统/web/admin_system/.env.development

@@ -1 +1 @@
-VUE_APP_API_URL_LOGIN = "http://localhost:8080/admin-system/account/p13_account_check.do"
+VUE_APP_API_URL_LOGIN = "http://222.76.244.118:11001/admin-system/account/p13_account_check.do"

企业级管理系统/web/admin_system/src/App.vue

@@ -2,21 +2,29 @@
  * @Author: Kane
  * @Date: 2022-12-14 15:12:46
  * @LastEditors: Kane
- * @LastEditTime: 2022-12-14 17:03:58
+ * @LastEditTime: 2023-01-19 14:26:17
  * @FilePath: \admin_system\src\App.vue
  * @Description: 
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
 -->
 <template>
-  <router-view></router-view>
+  <el-config-provider :locale="this.locale">
+    <router-view></router-view>
+  </el-config-provider>
 </template>
 
 <script>
-// import HelloWorld from "./components/HelloWorld.vue";
+//引入语言组件
+import zhCn from "element-plus/lib/locale/lang/zh-cn";
 
 export default {
   name: "App",
+  data() {
+    return {
+      locale: zhCn, //语言属性
+    };
+  },
   components: {
     // HelloWorld,
   },

企业级管理系统/web/admin_system/src/layout/Index.vue

@@ -2,26 +2,26 @@
  * @Author: Kane
  * @Date: 2023-01-04 11:05:44
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-09 15:50:52
+ * @LastEditTime: 2023-01-23 17:10:55
  * @FilePath: \admin_system\src\layout\Index.vue
  * @Description: 
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
 -->
 <template>
-    <el-container id="layout-container">
-        <el-header id="layout-header">
-            <LayoutHeader />
-        </el-header>
-        <el-container id="layout-container-down">
-            <el-aside :width="asideWidth" id="layout-aside">
-                <LayoutAside />
-            </el-aside>
-            <el-main id="layout-main">
-                <LayoutMain />
-            </el-main>
-        </el-container>
+  <el-container id="layout-container">
+    <el-header id="layout-header">
+      <LayoutHeader />
+    </el-header>
+    <el-container id="layout-container-down">
+      <el-aside :width="asideWidth" id="layout-aside">
+        <LayoutAside />
+      </el-aside>
+      <el-main id="layout-main">
+        <LayoutMain />
+      </el-main>
     </el-container>
+  </el-container>
 </template>
 
 <script>
@@ -30,50 +30,52 @@ import LayoutHeader from "./components/Header.vue";
 import LayoutMain from "./components/Main.vue";
 
 export default {
-    name: "layoutPage",
-    components: {
-        LayoutAside, LayoutHeader, LayoutMain,
-    },
-    computed: {
-        asideWidth()
-        {
-            const collapse = this.$store.state.app.asideBarCollapse;
+  name: "layoutPage",
+  components: {
+    LayoutAside,
+    LayoutHeader,
+    LayoutMain,
+  },
+  computed: {
+    asideWidth()
+    {
+      const collapse = this.$store.state.app.asideBarCollapse;
 
-            return collapse === true ? "65px" : "175px";
-        }
-    }
+      return collapse === true ? "65px" : "180px";
+    },
+  },
 };
 </script>
 
 <style scoped>
 #layout-container {
-    height: 100vh;
-    max-height: 100vh;
-    /* overflow: hiddens; */
+  height: 100vh;
+  max-height: 100vh;
+  /* overflow: hiddens; */
 }
 
 #layout-aside {
-    /* width: 175px; */
-    background-color: #223142;
-    overflow-x: hidden;
+  /* width: 175px; */
+  background-color: #223142;
+  overflow-x: hidden;
 }
 
 #layout-header {
-    height: 50px;
-    /* background-color: #77bc99; */
-    padding: 0px;
-    flex-grow: 0;
+  height: 50px;
+  /* background-color: #77bc99; */
+  padding: 0px;
+  flex-grow: 0;
 }
 
 #layout-main {
-    background-color: #ddd;
-    /* height: 0; */
-    /* flex-grow: 1; */
+  background-color: #ecf2f9;
+  /* height: 0; */
+  /* flex-grow: 1; */
+  overflow: overlay;
 }
 
 #layout-container-down {
-    height: calc(100vh - 50px);
-    /* max-height: calc(100vh - 50px); */
-
+  height: calc(100vh - 50px);
+  max-height: calc(100vh - 50px);
 }
 </style>

企业级管理系统/web/admin_system/src/layout/components/Header.vue

@@ -2,24 +2,29 @@
  * @Author: Kane
  * @Date: 2023-01-04 11:39:04
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-11 17:07:13
+ * @LastEditTime: 2023-01-19 14:53:38
  * @FilePath: \admin_system\src\layout\components\Header.vue
  * @Description: 
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
 -->
 <template>
-    <div class="app_banner no_select">
-        <span class="company_name">CPIC</span>
-        <div class="version_div">
-            <div>测试版</div>
-            <div>3.6.7 x64 Build 202208301257</div>
-        </div>
-        <div class="buttons_div">
-            <User style="width: 25px; height; 25px; margin-right: 8px" />
-            <SwitchButton style="width: 25px; height; 25px; margin-right: 8px; cursor:pointer;" @click="logout" />
-        </div>
+  <div class="app_banner no_select">
+    <span class="company_name">CPIC</span>
+    <div class="version_div">
+      <div>测试版</div>
+      <div>3.6.7 x64 Build 202208301257</div>
     </div>
+    <div class="buttons_div">
+      <User
+        style="width: 25px; height; 25px; margin-right: 8px; cursor:pointer;"
+      />
+      <SwitchButton
+        style="width: 25px; height; 25px; margin-right: 8px; cursor:pointer;"
+        @click="logout"
+      />
+    </div>
+  </div>
 </template>
 
 <script>
@@ -27,73 +32,69 @@
 import { Logout } from "../../utils/api/info/account";
 
 export default {
-    name: "AppBanner",
-    data()
-    {
-        return {};
-    },
-    // created() {
-    //   console.log("banner请求数据！");
-    // },
-    mounted()
-    {
-        //console.log("banner请求数据！");
-    },
-    methods: {
-        logout()
-        {
-            this.$confirm("是否退出系统？", "提示", {
-                confirmButtonText: "是",
-                cancelButtonText: "否",
-                type: "warning",
-            }).then(() =>
-            {
-                Logout();
-            });
-        },
+  name: "AppBanner",
+  data() {
+    return {};
+  },
+  // created() {
+  //   console.log("banner请求数据！");
+  // },
+  mounted() {
+    //console.log("banner请求数据！");
+  },
+  methods: {
+    logout() {
+      this.$confirm("是否退出系统？", "请确认", {
+        confirmButtonText: "是",
+        cancelButtonText: "否",
+        type: "warning",
+      }).then(() => {
+        Logout();
+      });
     },
+  },
 };
 </script>
 <style scoped>
 .app_banner {
-    background-color: var(--banner-background-color);
-    color: #fff;
-    display: flex;
-    justify-content: left;
-    align-items: center;
-    padding: 0px 15px 0px 15px;
-    height: 100%;
-    position: relative;
+  background-color: var(--banner-background-color);
+  color: #fff;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  padding: 0px 15px 0px 15px;
+  height: 100%;
+  position: relative;
 }
 
 .no_select {
-    -webkit-touch-callout: none;
-    -moz-user-select: none;
-    /*火狐*/
-    -webkit-user-select: none;
-    /*webkit浏览器*/
-    -ms-user-select: none;
-    /*IE10*/
-    -khtml-user-select: none;
-    /*早期浏览器*/
-    user-select: none;
+  -webkit-touch-callout: none;
+  -moz-user-select: none;
+  /*火狐*/
+  -webkit-user-select: none;
+  /*webkit浏览器*/
+  -ms-user-select: none;
+  /*IE10*/
+  -khtml-user-select: none;
+  /*早期浏览器*/
+  user-select: none;
 }
 
-.app_banner>*+* {
-    margin-left: 10px;
+.app_banner > * + * {
+  margin-left: 10px;
 }
 
 .company_name {
-    font-size: 2rem;
+  font-size: 2rem;
 }
 
 .version_div {
-    font-size: 0.5rem;
+  font-size: 0.5rem;
 }
 
 .buttons_div {
-    margin-left: auto;
-    padding-top: 5px;
-    /* border: 1px solid salmon; */
+  margin-left: auto;
+  padding-top: 5px;
+  /* border: 1px solid salmon; */
 }
 </style>

企业级管理系统/web/admin_system/src/router/index.js

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-12-14 15:12:46
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-11 10:28:24
+ * @LastEditTime: 2023-01-12 14:52:09
  * @FilePath: \admin_system\src\router\index.js
  * @Description: 定义应用路由配置
  * 
@@ -62,6 +62,15 @@ const routes = [
       icon: "edit",
     },
     children: [
+      {
+        path: "/staffInfo",
+        name: "StaffInfo",
+        meta: {
+          title: "人员信息",
+          icon: "edit",
+        },
+        component: () => import("../views/info/StaffInfo.vue"),
+      },
       {
         path: "/newsIndex",
         name: "NewsIndex",

企业级管理系统/web/admin_system/src/utils/api/info/account.js

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-12-22 09:10:20
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-11 17:02:15
+ * @LastEditTime: 2023-01-18 21:45:12
  * @FilePath: \admin_system\src\utils\api\info\account.js
  * @Description:
  *
@@ -13,11 +13,13 @@ import { API_URL } from "@/utils/api/config"; //所有API的地址
 import router from "../../../router/index";
 import store from "../../../store/index";
 
+/**
+ * 登录请求函数
+ * @param {*} userInfo 
+ * @returns 返回promise对象
+ */
 export function Login(userInfo)
 {
-    //debugger;
-    console.log(API_URL.URL_LOGIN);
-
     return instance.request(
         {
             method: "post",
@@ -27,17 +29,11 @@ export function Login(userInfo)
     );
 }
 
+/**
+ * 退出登录
+ */
 export function Logout()
 {
-    // if (this.$store && this.$store.state.app)
-    // {
-    //     //this.$store.commit();
-    // }
-
-    //const store = useStore();
-
-    //console.log(store);
-
     console.log(store);
 
     window.localStorage.removeItem("token");

企业级管理系统/web/admin_system/src/utils/api/request.js

@@ -2,14 +2,16 @@
  * @Author: Kane
  * @Date: 2022-12-22 17:18:10
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-11 14:58:44
+ * @LastEditTime: 2023-01-12 17:47:39
  * @FilePath: \admin_system\src\utils\api\request.js
- * @Description: 
+ * @Description: 配置axios拦截器
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
  */
 import axios from "axios";
 import store from "../../store/index";
+import { ElMessageBox } from "element-plus";
+import router from "@/router";
 
 const service = axios.create(
     {
@@ -18,7 +20,10 @@ const service = axios.create(
     }
 );
 
-//加上请求拦截器
+
+/**
+ * 加上请求拦截器
+ */
 service.interceptors.request.use(
     function (config)
     {
@@ -47,13 +52,42 @@ service.interceptors.request.use(
     }
 );
 
+//响应拦截器
 service.interceptors.response.use(
     function (response)
     {
+        //200
+        if (response.status === 200)
+        {
+            console.log("响应拦截器，响应代码", response.status);
+        }
+
+        //401，用户token失效，跳转到
+        if (response.state === 401)
+        {
+            ElMessageBox.confirm(
+                "用户登录超时，请重新登录",
+                "警告",
+                {
+                    confirmButtonText: "是",
+                    cancelButtonText: "否",
+                    type: "warning",
+                },
+            ).then(() =>
+            {
+                router.replace("/login");
+            }).catch(() =>
+            {
+                router.replace("/login");
+            });
+        }
+
         return response;
     },
     function (error)
     {
+        console.log("响应拦截器，异常信息：", error);
+
         return Promise.reject(error);
     }
 );

企业级管理系统/web/admin_system/src/views/account/Login.vue

@@ -3,7 +3,7 @@
  * @Author: Kane
  * @Date: 2022-12-14 15:23:54
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-11 14:40:11
+ * @LastEditTime: 2023-01-18 22:24:21
  * @FilePath: \admin_system\src\views\account\Login.vue
  * @Description: 
  * 
@@ -29,16 +29,16 @@
         </el-form-item>
         <el-form-item v-show="current_menu === tab_menu[1].type">
           <label class="form-label">确认密码</label>
-          <el-input type="password" v-model.lazy.trim="loginForm.confirm_password"></el-input>
+          <el-input type="password" disabled v-model.lazy.trim="loginForm.confirm_password"></el-input>
         </el-form-item>
         <el-form-item>
           <label class="form-label">验证码</label>
           <el-row :gutter="10">
             <el-col :span="14">
-              <el-input type="text"></el-input>
+              <el-input type="text" disabled></el-input>
             </el-col>
             <el-col :span="10">
-              <el-button type="danger" class="el-button-block" @click="getValidateCode()">获取验证码</el-button>
+              <el-button type="danger" disabled class="el-button-block" @click="getValidateCode()">获取验证码</el-button>
             </el-col>
           </el-row>
         </el-form-item>
@@ -93,6 +93,9 @@ export default {
         type: "error",
       });
     },
+    /**
+     * 登录
+     */
     login()
     {
       if (this.loginForm.username.length === 0 || this.loginForm.password === 0)

企业级管理系统/web/admin_system/src/views/info/StaffInfo.vue

@@ -0,0 +1,191 @@
+/* eslint-disable */
+<!--
+ * @Author: Kane
+ * @Date: 2023-01-12 14:43:46
+ * @LastEditors: Kane
+ * @LastEditTime: 2023-01-20 00:37:38
+ * @FilePath: \admin_system\src\views\info\StaffInfo.vue
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+-->
+<template>
+    <div class="query_box">
+        <el-form inline width="600px">
+            <el-row :gutter="10" class="el-row">
+                <el-col :span="8">
+                    <el-input v-model="query_param.staff_code" placeholder="请输入P09工号或P13账号"></el-input>
+                </el-col>
+                <el-col :span="4">
+                    <el-button type="danger">查询</el-button>
+                </el-col>
+                <el-col :span="12"></el-col>
+            </el-row>
+        </el-form>
+        <el-table ref="table" :data="table_data" border width="100%" stripe>
+            <el-table-column type="selection" min-width="30" align="center"></el-table-column>
+            <el-table-column min-width="200" label="员工名称" align="left" fixed="left">
+                <template #default="rowdata">
+                    <span @click="onShowStaffInfo(rowdata.row)" style="cursor: pointer; display: block; height: 100%">{{
+                        rowdata.row.staff_name
+                    }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column prop="staff_code" min-width="100" label="工号" align="left"></el-table-column>
+            <el-table-column prop="p13uid" min-width="200" label="P13账号" align="left"></el-table-column>
+            <el-table-column label="操作" min-width="200" align="center" fixed="right">
+                <template #default>
+                    <el-button type="warning">编辑</el-button>
+                    <el-button type="danger">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-row :gutter="10" width="100%">
+            <el-col :span="18"></el-col>
+            <el-pagination class="pull_left" @current-change="onCurrentPageIndexChange"
+                @size-change="onTablePageSizeChange" size="small" background :current-page="this.table_current_page"
+                :page-size="10" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, nex, jumper"
+                :total="table_data.length"></el-pagination>
+            <el-col :span="6" class="pull_right">
+                <el-button type="primary">重置</el-button>
+                <el-button type="danger">批量删除</el-button>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script>
+/* eslint-disable no-unused-vars*/
+export default {
+    name: "staff-info",
+    data()
+    {
+        return {
+            query_param: {
+                staff_code: "",
+            },
+            table_current_page: 1,
+            table_data: [
+                {
+                    staff_name: "王炜",
+                    staff_code: "588",
+                    p13uid: "wangwei-202",
+                },
+                {
+                    staff_name: "王炜",
+                    staff_code: "588",
+                    p13uid: "wangwei-202",
+                },
+                {
+                    staff_name: "王炜",
+                    staff_code: "588",
+                    p13uid: "wangwei-202",
+                },
+                {
+                    staff_name: "王炜",
+                    staff_code: "588",
+                    p13uid: "wangwei-202",
+                },
+                {
+                    staff_name: "王炜",
+                    staff_code: "588",
+                    p13uid: "wangwei-202",
+                },
+            ],
+        };
+    },
+    methods: {
+        onTableEdit(row) { },
+        /**
+         * 根据表格行index返回样式，实现斑马纹
+         * @param row
+         * @param rowIndex
+         * @return 返回的样式名称
+         */
+        tabRowClassName(row, rowIndex)
+        {
+            let index = rowIndex + 1;
+            if (index % 2 == 0)
+            {
+                return "warning-row";
+            }
+        },
+        /**
+         * 点击表格 用户名称 时的消息处理函数
+         * @param {*} staff
+         */
+        onShowStaffInfo(staff)
+        {
+            console.log("点击名称", staff);
+        },
+        /**
+         * 表格页显示数量变更时消息处理函数
+         */
+        onTablePageSizeChange() { },
+        /**
+         * 用户变更当前页时消息处理函数
+         */
+        onCurrentPageIndexChange() { },
+    },
+};
+</script>
+
+<style scoped>
+.el-row {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.el-label {
+    text-align: right;
+}
+
+.query_box {
+    width: 100%;
+    background-color: #fff;
+    border-radius: 5px;
+    padding: 15px;
+    margin-bottom: 15px;
+    text-align: left;
+}
+
+.query_box>*+* {
+    margin-top: 15px;
+}
+
+.info_box {
+    background-color: #fff;
+    border-radius: 5px;
+    padding: 15px;
+    margin-bottom: 15px;
+    width: 100%;
+}
+
+.el-table .warning-row {
+    background-color: #f3f9ff;
+}
+
+.query_box:hover,
+.info_box:hover {
+    box-shadow: 0px 0px 20px 0px rgb(14 18 22 / 25%);
+}
+
+div.cell {
+    height: 100%;
+}
+
+.pull_left {
+    margin-left: 15px;
+    margin-right: auto;
+}
+
+.pull_right {
+    display: flex;
+    justify-content: right;
+}
+
+.pull_right:last-child {
+    margin-right: 15px;
+}
+</style>