refactor: 多页面UI优化与功能完善

1. 优化合同页面默认备注内容
2. 修复分卷编辑接口参数缺失问题
3. 新增分卷、合卷、加工菜单路由
4. 重构导航栏默认显示逻辑
5. 升级重定向菜单页面样式与布局
6. 优化告警页面查询与展示字段
7. 重构全局搜索组件为弹窗模式
8. 优化报表页面代码格式与接口参数

klp-ui/src/components/HeaderSearch/index.vue

@@ -1,25 +1,45 @@
 <template>
-  <div :class="{'show':show}" class="header-search">
+  <div class="header-search">
     <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
-    <el-select
-      ref="headerSearchSelect"
-      v-model="search"
-      :remote-method="querySearch"
-      filterable
-      default-first-option
-      remote
-      placeholder="Search"
-      class="header-search-select"
-      @change="change"
+    <el-dialog
+      :visible.sync="show"
+      :close-on-click-modal="true"
+      width="560px"
+      append-to-body
+      :show-close="false"
+      custom-class="header-search-dialog"
+      @opened="$refs.searchInput && $refs.searchInput.focus()"
     >
-      <el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')" />
-    </el-select>
+      <div class="search-body">
+        <div class="search-input-wrap">
+          <svg-icon class-name="search-prefix" icon-class="search" />
+          <input
+            ref="searchInput"
+            v-model="search"
+            class="search-input"
+            placeholder="搜索菜单"
+            @input="querySearch($event.target.value)"
+          />
+        </div>
+        <ul v-if="options.length" class="search-results">
+          <li
+            v-for="option in options"
+            :key="option.item.path"
+            class="search-result-item"
+            @click="change(option.item)"
+          >
+            <span>{{ option.item.title.join(' > ') }}</span>
+          </li>
+        </ul>
+        <div v-if="search && options.length === 0" class="no-result">
+          无匹配结果
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-// fuse is a lightweight fuzzy-search module
-// make search results more in line with expectations
 import Fuse from 'fuse.js/dist/fuse.min.js'
 import path from 'path'
 
@@ -45,13 +65,6 @@ export default {
     },
     searchPool(list) {
       this.initFuse(list)
-    },
-    show(value) {
-      if (value) {
-        document.body.addEventListener('click', this.close)
-      } else {
-        document.body.removeEventListener('click', this.close)
-      }
     }
   },
   mounted() {
@@ -59,30 +72,20 @@ export default {
   },
   methods: {
     click() {
-      this.show = !this.show
-      if (this.show) {
-        this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
-      }
-    },
-    close() {
-      this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
+      this.show = true
+      this.search = ''
       this.options = []
-      this.show = false
     },
     change(val) {
-      const path = val.path;
-      if(this.ishttp(val.path)) {
-        // http(s):// 路径新窗口打开
-        const pindex = path.indexOf("http");
-        window.open(path.substr(pindex, path.length), "_blank");
+      if (this.ishttp(val.path)) {
+        const pindex = val.path.indexOf('http')
+        window.open(val.path.substr(pindex, val.path.length), '_blank')
       } else {
         this.$router.push(val.path)
       }
+      this.show = false
       this.search = ''
       this.options = []
-      this.$nextTick(() => {
-        this.show = false
-      })
     },
     initFuse(list) {
       this.fuse = new Fuse(list, {
@@ -100,13 +103,10 @@ export default {
         }]
       })
     },
-    // Filter out the routes that can be displayed in the sidebar
-    // And generate the internationalized title
     generateRoutes(routes, basePath = '/', prefixTitle = []) {
       let res = []
 
       for (const router of routes) {
-        // skip hidden router
         if (router.hidden) { continue }
 
         const data = {
@@ -118,13 +118,10 @@ export default {
           data.title = [...data.title, router.meta.title]
 
           if (router.redirect !== 'noRedirect') {
-            // only push the routes with title
-            // special case: need to exclude parent router without redirect
             res.push(data)
           }
         }
 
-        // recursive child routes
         if (router.children) {
           const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
           if (tempRoutes.length >= 1) {
@@ -150,39 +147,81 @@ export default {
 
 <style lang="scss" scoped>
 .header-search {
-  font-size: 0 !important;
-
   .search-icon {
     cursor: pointer;
     font-size: 18px;
     vertical-align: middle;
   }
+}
+</style>
 
-  .header-search-select {
-    font-size: 18px;
-    transition: width 0.2s;
-    width: 0;
-    overflow: hidden;
-    background: transparent;
-    border-radius: 0;
-    display: inline-block;
-    vertical-align: middle;
+<style lang="scss">
+.header-search-dialog {
+  border-radius: 8px;
 
-    ::v-deep .el-input__inner {
-      border-radius: 0;
-      border: 0;
-      padding-left: 0;
-      padding-right: 0;
-      box-shadow: none !important;
-      border-bottom: 1px solid #d9d9d9;
-      vertical-align: middle;
-    }
+  .el-dialog__header {
+    padding: 0;
   }
 
-  &.show {
-    .header-search-select {
-      width: 210px;
-      margin-left: 10px;
+  .el-dialog__body {
+    padding: 0;
+  }
+
+  .search-body {
+    .search-input-wrap {
+      display: flex;
+      align-items: center;
+      margin: 12px 20px;
+      padding-bottom: 12px;
+      border-bottom: 1px solid #e8e8e8;
+
+      .search-prefix {
+        font-size: 18px;
+        color: #999;
+        flex-shrink: 0;
+        margin-right: 12px;
+      }
+
+      .search-input {
+        flex: 1;
+        border: none;
+        outline: none;
+        font-size: 16px;
+        line-height: 32px;
+        height: 32px;
+        background: transparent;
+
+        &::placeholder {
+          color: #bfbfbf;
+        }
+      }
+    }
+
+    .search-results {
+      max-height: 360px;
+      overflow-y: auto;
+      padding: 0;
+      margin: 0;
+      list-style: none;
+
+      .search-result-item {
+        padding: 10px 20px;
+        cursor: pointer;
+        font-size: 14px;
+        color: #333;
+        transition: background 0.15s;
+
+        &:hover {
+          background: #f0f2f5;
+        }
+      }
+    }
+
+    .no-result {
+      padding: 32px 0;
+      text-align: center;
+      color: #999;
+      font-size: 14px;
     }
   }
 }