列配置

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>

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>

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-tooltip class="item" effect="dark" content="列配置" placement="top" v-if="columns">
-        <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
+        <el-popover placement="bottom-end" width="260" trigger="click" v-model="open">
-      </el-tooltip> -->
+          <div class="column-panel">
-      <!-- <el-tooltip class="item" effect="dark" content="刷新" placement="top">
+            <!-- 搜索 -->
-        <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
+            <el-input v-model="keyword" size="mini" placeholder="搜索字段" clearable class="search-input" />
-      </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'"/>
+            <div class="panel-actions">
-        <el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'">
+              <el-checkbox :value="checkAll" :indeterminate="isIndeterminate" @change="onCheckAll"> 全选 </el-checkbox>
-          <el-button size="mini" circle icon="el-icon-menu" />
+              <el-link type="primary" :underline="false" @click="resetColumns"> 恢复默认 </el-link>
-          <el-dropdown-menu slot="dropdown" style="max-height: 880px; overflow-y: auto;">
+            </div>
-            <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" />
+            <div class="list-wrapper">
-              </el-dropdown-item>
+              <draggable
-            </template>
+                v-model="innerColumns"
-          </el-dropdown-menu>
+                :options="{ handle: '.drag-handle', animation: 150 }"
-        </el-dropdown>
+                ghost-class="ghost"
-      </el-tooltip> -->
+              >
-      <el-tooltip class="item" effect="dark" content="列表全屏" placement="top" style="margin-left: 10px">
+                <transition-group name="flip-list" tag="div">
-        <el-button
+                  <div v-for="item in innerColumns" :key="item.key" class="column-item" v-show="matchKeyword(item)">
-          size="mini"
+                    <el-checkbox v-model="item.visible">
-          circle
+                      {{ item.label }}
-          icon="el-icon-full-screen"
+                    </el-checkbox>
-          @click="toggleFullscreen"
+                    <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",
+  name: 'RightToolbarElementDraggable',
-  data() {
+  components: { draggable },
-    return {
-      // 显隐数据
-      value: [],
-      // 弹出层标题
-      title: "显示/隐藏",
-      // 是否显示弹出层
-      open: false,
-    };
-  },
   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 = {};
+      const ret = {}
-      if (this.gutter) {
+      if (this.gutter) ret.marginRight = `${this.gutter / 2}px`
-        ret.marginRight = `${this.gutter / 2}px`;
+      return ret
-      }
+    },
-      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() {
+  watch: {
-    if (this.showColumnsType == 'transfer') {
+    columns: {
-      // 显隐列初始默认隐藏列
+      immediate: true,
-      for (let item in this.columns) {
+      deep: true,
-        if (this.columns[item].visible === false) {
+      handler(val) {
-          this.value.push(parseInt(item));
+        // 复用你原来 transfer 逻辑的“本地副本”思想
-        }
+        this.innerColumns = val.map((c) => ({ ...c }))
-      }
+        this.backupColumns = val.map((c) => ({ ...c }))
-    }
+      },
+    },
   },
   methods: {
-    // 搜索
+    matchKeyword(item) {
-    toggleSearch() {
+      if (!this.keyword) return true
-      this.$emit("update:showSearch", !this.showSearch);
+      const k = this.keyword.toLowerCase()
+      return (item.label || '').toLowerCase().includes(k)
     },
-    // 刷新
+    onCheckAll(val) {
-    refresh() {
+      this.innerColumns.forEach((c) => (c.visible = val))
-      this.$emit("queryTable");
     },
-    // 右侧列表元素变化
+    resetColumns() {
-    toggleFullscreen() {
+      // 恢复为“初始 columns”快照
-      // 1️⃣ 找表格 DOM
+      this.innerColumns = this.backupColumns.map((c) => ({ ...c }))
-      let tableEl = document.querySelector('.el-table')
+    },
+    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 {
+</script>
-  margin-bottom: 10px;
+
+<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>

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;
+    justify-content: center;
-    margin: 0 20px;
+    // margin: 0 20px;
     .menu-item {
       height: 50px;
       cursor: pointer;