From 0b9b2aa39f7dfdb53f96f0d25d5a97fb8bd6a963 Mon Sep 17 00:00:00 2001
From: bb_pan <max_163email@163.com>
Date: Mon, 26 Jan 2026 11:25:59 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=97=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/svg/menu.svg             |  15 ++
 src/assets/images/icon-drag.png           | Bin 0 -> 396 bytes
 src/components/RightToolbar/index-old.vue | 210 ++++++++++++++++
 src/components/RightToolbar/index.vue     | 294 ++++++++++++----------
 src/layout/components/Navbar.vue          |   8 +-
 5 files changed, 397 insertions(+), 130 deletions(-)
 create mode 100644 src/assets/icons/svg/menu.svg
 create mode 100644 src/assets/images/icon-drag.png
 create mode 100644 src/components/RightToolbar/index-old.vue

diff --git a/src/assets/icons/svg/menu.svg b/src/assets/icons/svg/menu.svg
new file mode 100644
index 00000000..943c9e33
--- /dev/null
+++ b/src/assets/icons/svg/menu.svg
@@ -0,0 +1,15 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_701_3265)">
+<path d="M2 17L2 1" stroke="#595959" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M16 17L16 1" stroke="#595959" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M9 1L9 17" stroke="#595959" stroke-width="1.5" stroke-linecap="round"/>
+<circle cx="2" cy="13" r="2" fill="#595959"/>
+<circle cx="16" cy="13" r="2" fill="#595959"/>
+<circle cx="2" cy="2" r="2" transform="matrix(1 0 0 -1 7 7)" fill="#595959"/>
+</g>
+<defs>
+<clipPath id="clip0_701_3265">
+<rect width="18" height="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/images/icon-drag.png b/src/assets/images/icon-drag.png
new file mode 100644
index 0000000000000000000000000000000000000000..d60055fadbf38e1048a1202f07a90191a696ee9d
GIT binary patch
literal 396
zcmeAS@N?(olHy`uVBq!ia0vp^AT~b-8<4#FKaLMbF%}28J29*~C-V}>aY>EvO!M_+
z&;qhK7#Q0#8CXC{fLIEM85o!sFfuR$X-1IP0w%aD*8*lZn;)d`^9=J=Aob1D#W6%f
zG})%$!GRh#H@9ptF)``v?APHu9uH1TR1T{D|Id~~<koSfkQBC*6@UK!j~DS+tnugX
z@9h%8!onW!w1th0H?wvmCnpz+o-{DHeDUJPL-XzH9k_BYJbiH@o#mI6*b6uB1?#)l
zu358B`S#x2+h%2XdGF#DNS|-2xyzBF!Bo40X~heHO-_D(e$EQ^(kq^E3QrJZPD$BU
z^YfF&CMAK}2M<0Jnc&4PCDN+r?r!(^-{0SrK&<}m&6^tW*?Zgh<-?eMJv0@bV8O&Q
z%i4jL?FCn3r;~KX3E6~07K~i;COfd+S+i!11}D=J&J>{uyO_Ux)nsUijsL=t75xnq
N5}vMpF6*2UngE}Eh6?}y

literal 0
HcmV?d00001

diff --git a/src/components/RightToolbar/index-old.vue b/src/components/RightToolbar/index-old.vue
new file mode 100644
index 00000000..672c98b3
--- /dev/null
+++ b/src/components/RightToolbar/index-old.vue
@@ -0,0 +1,210 @@
+<template>
+  <div class="top-right-btn" :style="style">
+    <el-row>
+      <!-- <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">
+        <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
+      </el-tooltip> -->
+      <!-- <el-tooltip class="item" effect="dark" content="刷新" placement="top">
+        <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
+      </el-tooltip> -->
+      <!-- <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
+        <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/>
+        <el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'">
+          <el-button size="mini" circle icon="el-icon-menu" />
+          <el-dropdown-menu slot="dropdown" style="max-height: 880px; overflow-y: auto;">
+            <template>
+              <el-dropdown-item v-for="(item, index) in columns" :key="index">
+                <el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />
+              </el-dropdown-item>
+            </template>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </el-tooltip> -->
+      <el-tooltip class="item" effect="dark" content="列表全屏" placement="top" style="margin-left: 10px">
+        <el-button
+          size="mini"
+          circle
+          icon="el-icon-full-screen"
+          @click="toggleFullscreen"
+        />
+      </el-tooltip>
+    </el-row>
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
+      <el-transfer
+        :titles="['显示', '隐藏']"
+        v-model="value"
+        :data="columns"
+        @change="dataChange"
+      ></el-transfer>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  name: "RightToolbar",
+  data() {
+    return {
+      // 显隐数据
+      value: [],
+      // 弹出层标题
+      title: "显示/隐藏",
+      // 是否显示弹出层
+      open: false,
+    };
+  },
+  props: {
+    /* 是否显示检索条件 */
+    showSearch: {
+      type: Boolean,
+      default: true,
+    },
+    /* 显隐列信息 */
+    columns: {
+      type: Array,
+    },
+    /* 是否显示检索图标 */
+    search: {
+      type: Boolean,
+      default: true,
+    },
+    /* 显隐列类型（transfer穿梭框、checkbox复选框） */
+    showColumnsType: {
+      type: String,
+      default: "checkbox",
+    },
+    /* 右外边距 */
+    gutter: {
+      type: Number,
+      default: 10,
+    },
+  },
+  computed: {
+    style() {
+      const ret = {};
+      if (this.gutter) {
+        ret.marginRight = `${this.gutter / 2}px`;
+      }
+      return ret;
+    }
+  },
+  created() {
+    if (this.showColumnsType == 'transfer') {
+      // 显隐列初始默认隐藏列
+      for (let item in this.columns) {
+        if (this.columns[item].visible === false) {
+          this.value.push(parseInt(item));
+        }
+      }
+    }
+  },
+  methods: {
+    // 搜索
+    toggleSearch() {
+      this.$emit("update:showSearch", !this.showSearch);
+    },
+    // 刷新
+    refresh() {
+      this.$emit("queryTable");
+    },
+    // 右侧列表元素变化
+    toggleFullscreen() {
+      // 1️⃣ 找表格 DOM
+      let tableEl = document.querySelector('.el-table')
+
+      if (!tableEl) {
+        const tables = Array.from(document.querySelectorAll('.el-table'))
+        tableEl = tables.find((t) => t.offsetParent !== null)
+      }
+
+      if (!tableEl) {
+        this.$message.warning('未找到表格区域')
+        return
+      }
+
+      // 2️⃣ 找分页 DOM
+      let pagerEl = document.querySelector('.pagination-container')
+
+      if (!pagerEl) {
+        const pagers = Array.from(document.querySelectorAll('.pagination-container'))
+        pagerEl = pagers.find((p) => p.offsetParent !== null)
+      }
+
+      // 3️⃣ 找最近公共父节点
+      let fullscreenEl = tableEl.parentElement
+
+      if (pagerEl) {
+        while (fullscreenEl && (!fullscreenEl.contains(tableEl) || !fullscreenEl.contains(pagerEl))) {
+          fullscreenEl = fullscreenEl.parentElement
+        }
+      }
+
+      if (!fullscreenEl) fullscreenEl = tableEl
+
+      const doc = document
+
+      // 🔐 只保存一次原样式
+      if (!fullscreenEl.__fsBound) {
+        fullscreenEl.__oldBg = fullscreenEl.style.background
+        fullscreenEl.__oldMinHeight = fullscreenEl.style.minHeight
+        fullscreenEl.__fsBound = true
+      }
+
+      // ===== 进入全屏 =====
+      if (!doc.fullscreenElement) {
+        fullscreenEl.style.background = '#fff'
+        fullscreenEl.style.minHeight = '100vh'
+
+        const onFsChange = () => {
+          // 👉 退出全屏（ESC / API）
+          if (!document.fullscreenElement) {
+            // 1️⃣ 还原样式
+            fullscreenEl.style.background = fullscreenEl.__oldBg || ''
+            fullscreenEl.style.minHeight = fullscreenEl.__oldMinHeight || ''
+
+            // 2️⃣ 强制表格重新布局（不依赖 ref）
+            this.$nextTick(() => {
+              const tableVm = tableEl.__vue__ || document.querySelector('.el-table')?.__vue__
+
+              tableVm?.doLayout()
+            })
+
+            document.removeEventListener('fullscreenchange', onFsChange)
+          }
+        }
+
+        document.addEventListener('fullscreenchange', onFsChange)
+
+        fullscreenEl.requestFullscreen?.()
+      } else {
+        // ===== 主动退出全屏（点按钮）=====
+        doc.exitFullscreen?.()
+      }
+    },
+    dataChange(data) {
+      for (let item in this.columns) {
+        const key = this.columns[item].key;
+        this.columns[item].visible = !data.includes(key);
+      }
+    },
+    // 打开显隐列dialog
+    showColumn() {
+      this.open = true;
+    },
+    // 勾选
+    checkboxChange(event, label) {
+      this.columns.filter(item => item.label == label)[0].visible = event;
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+::v-deep .el-transfer__button {
+  border-radius: 50%;
+  padding: 12px;
+  display: block;
+  margin-left: 0px;
+}
+::v-deep .el-transfer__button:first-child {
+  margin-bottom: 10px;
+}
+</style>
diff --git a/src/components/RightToolbar/index.vue b/src/components/RightToolbar/index.vue
index 672c98b3..bacb1632 100644
--- a/src/components/RightToolbar/index.vue
+++ b/src/components/RightToolbar/index.vue
@@ -1,170 +1,180 @@
 <template>
   <div class="top-right-btn" :style="style">
     <el-row>
-      <!-- <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">
-        <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
-      </el-tooltip> -->
-      <!-- <el-tooltip class="item" effect="dark" content="刷新" placement="top">
-        <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
-      </el-tooltip> -->
-      <!-- <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
-        <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/>
-        <el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'">
-          <el-button size="mini" circle icon="el-icon-menu" />
-          <el-dropdown-menu slot="dropdown" style="max-height: 880px; overflow-y: auto;">
-            <template>
-              <el-dropdown-item v-for="(item, index) in columns" :key="index">
-                <el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />
-              </el-dropdown-item>
-            </template>
-          </el-dropdown-menu>
-        </el-dropdown>
-      </el-tooltip> -->
-      <el-tooltip class="item" effect="dark" content="列表全屏" placement="top" style="margin-left: 10px">
-        <el-button
-          size="mini"
-          circle
-          icon="el-icon-full-screen"
-          @click="toggleFullscreen"
-        />
+      <el-tooltip class="item" effect="dark" content="列配置" placement="top" v-if="columns">
+        <el-popover placement="bottom-end" width="260" trigger="click" v-model="open">
+          <div class="column-panel">
+            <!-- 搜索 -->
+            <el-input v-model="keyword" size="mini" placeholder="搜索字段" clearable class="search-input" />
+
+            <!-- 操作区 -->
+            <div class="panel-actions">
+              <el-checkbox :value="checkAll" :indeterminate="isIndeterminate" @change="onCheckAll"> 全选 </el-checkbox>
+              <el-link type="primary" :underline="false" @click="resetColumns"> 恢复默认 </el-link>
+            </div>
+
+            <!-- 可拖拽列表 -->
+            <div class="list-wrapper">
+              <draggable
+                v-model="innerColumns"
+                :options="{ handle: '.drag-handle', animation: 150 }"
+                ghost-class="ghost"
+              >
+                <transition-group name="flip-list" tag="div">
+                  <div v-for="item in innerColumns" :key="item.key" class="column-item" v-show="matchKeyword(item)">
+                    <el-checkbox v-model="item.visible">
+                      {{ item.label }}
+                    </el-checkbox>
+                    <span class="drag-handle">
+                      <img src="@/assets/images/icon-drag.png" style="width: 10px; height: 15px" alt="" />
+                    </span>
+                  </div>
+                </transition-group>
+              </draggable>
+            </div>
+
+            <!-- 底部按钮 -->
+            <div class="panel-footer">
+              <el-button size="mini" type="primary" style="width: 100%" @click="applyChange"> 确 定 </el-button>
+            </div>
+          </div>
+
+          <!-- 触发按钮 -->
+          <svg-icon slot="reference" icon-class="menu" class="menu-icon" />
+        </el-popover>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="列表全屏" placement="top" style="margin: 5px 0 0 10px">
+        <svg-icon icon-class="full-screen" @click="toggleFullscreen" />
       </el-tooltip>
     </el-row>
-    <el-dialog :title="title" :visible.sync="open" append-to-body>
-      <el-transfer
-        :titles="['显示', '隐藏']"
-        v-model="value"
-        :data="columns"
-        @change="dataChange"
-      ></el-transfer>
-    </el-dialog>
   </div>
 </template>
+
 <script>
+import draggable from 'vuedraggable'
+
 export default {
-  name: "RightToolbar",
-  data() {
-    return {
-      // 显隐数据
-      value: [],
-      // 弹出层标题
-      title: "显示/隐藏",
-      // 是否显示弹出层
-      open: false,
-    };
-  },
+  name: 'RightToolbarElementDraggable',
+  components: { draggable },
   props: {
-    /* 是否显示检索条件 */
-    showSearch: {
-      type: Boolean,
-      default: true,
-    },
-    /* 显隐列信息 */
     columns: {
       type: Array,
+      required: true,
     },
-    /* 是否显示检索图标 */
-    search: {
-      type: Boolean,
-      default: true,
-    },
-    /* 显隐列类型（transfer穿梭框、checkbox复选框） */
-    showColumnsType: {
-      type: String,
-      default: "checkbox",
-    },
-    /* 右外边距 */
     gutter: {
       type: Number,
       default: 10,
     },
   },
+  data() {
+    return {
+      open: false,
+      keyword: '',
+      innerColumns: [],
+      backupColumns: [],
+    }
+  },
   computed: {
     style() {
-      const ret = {};
-      if (this.gutter) {
-        ret.marginRight = `${this.gutter / 2}px`;
-      }
-      return ret;
-    }
+      const ret = {}
+      if (this.gutter) ret.marginRight = `${this.gutter / 2}px`
+      return ret
+    },
+    checkAll() {
+      return this.innerColumns.length ? this.innerColumns.every((c) => c.visible) : false
+    },
+    isIndeterminate() {
+      const visCount = this.innerColumns.filter((c) => c.visible).length
+      return visCount > 0 && visCount < this.innerColumns.length
+    },
   },
-  created() {
-    if (this.showColumnsType == 'transfer') {
-      // 显隐列初始默认隐藏列
-      for (let item in this.columns) {
-        if (this.columns[item].visible === false) {
-          this.value.push(parseInt(item));
-        }
-      }
-    }
+  watch: {
+    columns: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        // 复用你原来 transfer 逻辑的“本地副本”思想
+        this.innerColumns = val.map((c) => ({ ...c }))
+        this.backupColumns = val.map((c) => ({ ...c }))
+      },
+    },
   },
   methods: {
-    // 搜索
-    toggleSearch() {
-      this.$emit("update:showSearch", !this.showSearch);
+    matchKeyword(item) {
+      if (!this.keyword) return true
+      const k = this.keyword.toLowerCase()
+      return (item.label || '').toLowerCase().includes(k)
     },
-    // 刷新
-    refresh() {
-      this.$emit("queryTable");
+    onCheckAll(val) {
+      this.innerColumns.forEach((c) => (c.visible = val))
     },
-    // 右侧列表元素变化
-    toggleFullscreen() {
-      // 1️⃣ 找表格 DOM
-      let tableEl = document.querySelector('.el-table')
+    resetColumns() {
+      // 恢复为“初始 columns”快照
+      this.innerColumns = this.backupColumns.map((c) => ({ ...c }))
+    },
+    applyChange() {
+      // === 关键：完全复用你原来 dataChange 的思想 ===
+      // 把 innerColumns 的 visible / 顺序，同步回 this.columns
+      this.innerColumns.forEach((col, idx) => {
+        const target = this.columns.find((c) => c.key === col.key)
+        if (target) {
+          target.visible = col.visible
+        }
+      })
 
+      // 同步顺序：直接用 splice 重排原数组（保证引用不变）
+      const newOrder = this.innerColumns.map((c) => c.key)
+      const ordered = newOrder.map((k) => this.columns.find((c) => c.key === k)).filter(Boolean)
+
+      this.columns.splice(0, this.columns.length, ...ordered)
+
+      this.open = false
+    },
+    toggleFullscreen() {
+      let tableEl = document.querySelector('.el-table')
       if (!tableEl) {
         const tables = Array.from(document.querySelectorAll('.el-table'))
         tableEl = tables.find((t) => t.offsetParent !== null)
       }
-
       if (!tableEl) {
         this.$message.warning('未找到表格区域')
         return
       }
 
-      // 2️⃣ 找分页 DOM
       let pagerEl = document.querySelector('.pagination-container')
-
       if (!pagerEl) {
         const pagers = Array.from(document.querySelectorAll('.pagination-container'))
         pagerEl = pagers.find((p) => p.offsetParent !== null)
       }
 
-      // 3️⃣ 找最近公共父节点
       let fullscreenEl = tableEl.parentElement
-
       if (pagerEl) {
         while (fullscreenEl && (!fullscreenEl.contains(tableEl) || !fullscreenEl.contains(pagerEl))) {
           fullscreenEl = fullscreenEl.parentElement
         }
       }
-
       if (!fullscreenEl) fullscreenEl = tableEl
 
       const doc = document
 
-      // 🔐 只保存一次原样式
       if (!fullscreenEl.__fsBound) {
         fullscreenEl.__oldBg = fullscreenEl.style.background
         fullscreenEl.__oldMinHeight = fullscreenEl.style.minHeight
         fullscreenEl.__fsBound = true
       }
 
-      // ===== 进入全屏 =====
       if (!doc.fullscreenElement) {
         fullscreenEl.style.background = '#fff'
         fullscreenEl.style.minHeight = '100vh'
 
         const onFsChange = () => {
-          // 👉 退出全屏（ESC / API）
           if (!document.fullscreenElement) {
-            // 1️⃣ 还原样式
             fullscreenEl.style.background = fullscreenEl.__oldBg || ''
             fullscreenEl.style.minHeight = fullscreenEl.__oldMinHeight || ''
 
-            // 2️⃣ 强制表格重新布局（不依赖 ref）
             this.$nextTick(() => {
               const tableVm = tableEl.__vue__ || document.querySelector('.el-table')?.__vue__
-
               tableVm?.doLayout()
             })
 
@@ -173,38 +183,68 @@ export default {
         }
 
         document.addEventListener('fullscreenchange', onFsChange)
-
-        fullscreenEl.requestFullscreen?.()
+        fullscreenEl.requestFullscreen && fullscreenEl.requestFullscreen()
       } else {
-        // ===== 主动退出全屏（点按钮）=====
-        doc.exitFullscreen?.()
+        doc.exitFullscreen && doc.exitFullscreen()
       }
     },
-    dataChange(data) {
-      for (let item in this.columns) {
-        const key = this.columns[item].key;
-        this.columns[item].visible = !data.includes(key);
-      }
-    },
-    // 打开显隐列dialog
-    showColumn() {
-      this.open = true;
-    },
-    // 勾选
-    checkboxChange(event, label) {
-      this.columns.filter(item => item.label == label)[0].visible = event;
-    }
   },
-};
-</script>
-<style lang="scss" scoped>
-::v-deep .el-transfer__button {
-  border-radius: 50%;
-  padding: 12px;
-  display: block;
-  margin-left: 0px;
 }
-::v-deep .el-transfer__button:first-child {
-  margin-bottom: 10px;
+</script>
+
+<style lang="scss" scoped>
+.top-right-btn {
+  display: flex;
+  align-items: center;
+}
+
+.menu-icon {
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.column-panel {
+  padding: 8px;
+  max-height: 400px;
+  display: flex;
+  flex-direction: column;
+}
+
+.list-wrapper {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.search-input {
+  margin-bottom: 8px;
+}
+
+.panel-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.column-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 0;
+}
+
+.drag-handle {
+  cursor: grab;
+  margin-right: 8px;
+  color: #999;
+  user-select: none;
+}
+
+.ghost {
+  opacity: 0.4;
+}
+
+.panel-footer {
+  margin-top: 8px;
 }
 </style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 1a417895..fc0f3b7d 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -446,7 +446,8 @@ export default {
   },
   created() {
     this.getUser()
-    this.menuList = this.sidebarRouters.filter((route) => !route.hidden)
+    this.menuList = this.sidebarRouters.filter((route) => !route.hidden && route.path !== '/')
+    console.log('🚀 ~ this.menuList:', this.menuList)
   },
   methods: {
     goWarningDetail(item) {
@@ -629,10 +630,11 @@ export default {
     height: 50px;
     line-height: 50px;
     flex: 1;
+    gap: 30px;
     display: flex;
     align-items: center;
-    justify-content: space-around;
-    margin: 0 20px;
+    justify-content: center;
+    // margin: 0 20px;
     .menu-item {
       height: 50px;
       cursor: pointer;