leisure-core 0.7.7 → 0.7.8

package/le-home/src/main.vue

@@ -1,1315 +0,0 @@
-<template>
-  <el-container class="le-home-cp-container">
-    <el-header class="header">
-      <el-row type="flex" align="middle" class="header-row">
-        <el-col :span="effectiveHeaderMenu.length ? 4 : 8" class="leftsection">
-          <div class="grid-content bg-purple">
-            <span class="userinfo-inner" @click="clickLeftTop">{{
-              companyInfo.name
-            }}</span>
-          </div>
-        </el-col>
-        <el-col
-          v-if="effectiveHeaderMenu.length"
-          :span="12"
-          class="middlesection"
-        >
-          <el-menu
-            mode="horizontal"
-            class="header-menu"
-            :background-color="headerMenuBgColor"
-            :text-color="headerMenuTextColor"
-            :active-text-color="headerMenuActiveTextColor"
-            :unique-opened="true"
-            popper-class="le-header-menu-popper"
-          >
-            <le-header-menu
-              v-for="item in effectiveHeaderMenu"
-              :key="item.id || item.name"
-              :item="item"
-              :level="0"
-              :on-select="handleHeaderMenuSelect"
-            ></le-header-menu>
-          </el-menu>
-        </el-col>
-        <el-col
-          :span="effectiveHeaderMenu.length ? 8 : 16"
-          class="rightsection"
-        >
-          <div class="grid-content bg-purple-light">
-            <slot name="rightComment"> </slot>
-            <el-dropdown size="medium" trigger="click" @command="handleCommand">
-              <span class="el-dropdown-link userinfo-inner-t">
-                <!-- <img src="@/assets/tx.png" class="img" /> -->
-                {{ username }}
-                <i class="el-icon-arrow-down el-icon--right"></i>
-              </span>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item
-                  v-for="item in extraDropdownItems"
-                  :key="item.command"
-                  :command="item.command"
-                  :divided="item.divided"
-                >
-                  {{ item.label }}
-                </el-dropdown-item>
-                <el-dropdown-item command="openSysSettings"
-                  >系统设置</el-dropdown-item
-                >
-                <el-dropdown-item command="2" divided
-                  >退出系统</el-dropdown-item
-                >
-              </el-dropdown-menu>
-            </el-dropdown>
-          </div>
-        </el-col>
-      </el-row>
-    </el-header>
-    <el-container>
-      <el-aside
-        class="aside"
-        :class="{ aside_hide: isHideMenu }"
-        :style="asideStyle"
-        ref="asideRef"
-      >
-        <el-menu
-          ref="sideMenu"
-          :unique-opened="true"
-          class="menu"
-          :background-color="menuBackgroundColor"
-          :text-color="menuTextColor"
-          :active-text-color="menuActiveTextColor"
-        >
-          <el-submenu
-            :index="item1.name"
-            v-for="item1 in menuData"
-            :key="item1.id"
-          >
-            <template slot="title">
-              <div @click="clickTitle">
-                <i :class="item1.icon"></i>&nbsp;
-                <span>{{ item1.title }}</span>
-              </div>
-            </template>
-            <el-menu-item
-              class="menuItem"
-              v-for="item2 in item1.children"
-              :key="item2.id"
-              :index="item2.name"
-              @click="clickMenuItem(item2)"
-              :title="shouldShowTooltip(item2.title) ? item2.title : ''"
-            >
-              &nbsp;&nbsp;
-              <span class="menu-item-text">{{ item2.title }}</span>
-            </el-menu-item>
-          </el-submenu>
-        </el-menu>
-        <!-- 只在展开时显示拖动条 -->
-        <div
-          v-if="!isHideMenu"
-          class="drag-handle"
-          @mousedown.prevent="startDrag"
-        ></div>
-      </el-aside>
-      <el-main class="main" style="padding: 10px 20px">
-        <div class="aside_open_close" @click="asidechange">
-          <i class="el-icon-arrow-left" v-if="aside_open_close"></i>
-          <i class="el-icon-arrow-right" v-else></i>
-        </div>
-        <div>
-          <el-tabs
-            class="el-tabs_"
-            v-model="tabNameCurrent"
-            closable
-            @tab-click="handleTabClick"
-            @tab-remove="removeTab"
-          >
-            <el-tab-pane
-              v-for="item in tabsAll"
-              :key="item.name"
-              :label="item.title"
-              :name="item.name"
-            >
-            </el-tab-pane>
-          </el-tabs>
-          <router-view
-            :key="refreshKey.toString() + $route.fullPath"
-          ></router-view>
-        </div>
-      </el-main>
-    </el-container>
-    <!-- 系统设置对话框 -->
-    <el-dialog
-      :visible.sync="sysSettingsVisible"
-      title="系统设置"
-      width="560px"
-      :close-on-click-modal="false"
-      custom-class="rounded-dialog"
-      append-to-body
-    >
-      <el-tabs v-model="sysSettingsTab" type="border-card">
-        <!-- 修改密码 -->
-        <el-tab-pane label="修改密码" name="pwd">
-          <el-form
-            ref="sysPwdForm"
-            :model="sysPwdForm"
-            :rules="sysPwdRules"
-            label-width="100px"
-            style="padding: 20px 0"
-          >
-            <el-form-item label="新密码" prop="newPwd">
-              <el-input
-                v-model="sysPwdForm.newPwd"
-                type="password"
-                placeholder="请输入新密码"
-                show-password
-              ></el-input>
-            </el-form-item>
-            <el-form-item label="确认密码" prop="confirmPwd">
-              <el-input
-                v-model="sysPwdForm.confirmPwd"
-                type="password"
-                placeholder="请再次输入新密码"
-                show-password
-              ></el-input>
-            </el-form-item>
-          </el-form>
-        </el-tab-pane>
-
-        <!-- 修改个人信息 -->
-        <el-tab-pane label="修改个人信息" name="person">
-          <el-form
-            ref="sysPerForm"
-            :model="sysPerForm"
-            :rules="sysPerRules"
-            label-width="100px"
-            style="padding: 20px 0"
-          >
-            <el-form-item label="昵称" prop="nick">
-              <el-input
-                v-model="sysPerForm.nick"
-                placeholder="请输入昵称"
-              ></el-input>
-            </el-form-item>
-            <el-form-item label="手机号" prop="phone">
-              <el-input
-                v-model="sysPerForm.phone"
-                placeholder="请输入手机号"
-                maxlength="11"
-              ></el-input>
-            </el-form-item>
-          </el-form>
-        </el-tab-pane>
-
-        <!-- 设置皮肤 -->
-        <el-tab-pane label="设置皮肤" name="skin">
-          <div class="skin-picker">
-            <div
-              v-for="skin in availableSkins"
-              :key="skin.name"
-              :class="['skin-item', { active: currentSkin === skin.name }]"
-              @click="selectSkin(skin.name)"
-            >
-              <div class="skin-color" :style="{ background: skin.color }"></div>
-              <div class="skin-info">
-                <div class="skin-name">{{ skin.label }}</div>
-                <div class="skin-desc" v-if="skin.name === currentSkin">
-                  当前使用
-                </div>
-              </div>
-              <i
-                v-if="currentSkin === skin.name"
-                class="el-icon-check skin-check"
-              ></i>
-            </div>
-          </div>
-        </el-tab-pane>
-      </el-tabs>
-      <!-- 对话框底部按钮:根据当前 tab 显示不同按钮 -->
-      <div slot="footer">
-        <template v-if="sysSettingsTab === 'pwd'">
-          <el-button @click="sysSettingsVisible = false">取消</el-button>
-          <el-button type="primary" @click="submitSysPwd">确定</el-button>
-        </template>
-        <template v-else-if="sysSettingsTab === 'person'">
-          <el-button @click="sysSettingsVisible = false">取消</el-button>
-          <el-button type="primary" @click="submitSysPer">确定</el-button>
-        </template>
-        <template v-else-if="sysSettingsTab === 'skin'">
-          <el-button @click="sysSettingsVisible = false">关闭</el-button>
-        </template>
-      </div>
-    </el-dialog>
-    <div v-show="contextMenuVisible">
-      <ul
-        :style="{ left: menuLeft + 'px', top: menuTop + 'px' }"
-        class="contextmenu"
-      >
-        <li>
-          <el-button
-            type="text"
-            size="mini"
-            icon="el-icon-refresh"
-            @click="closeOtherTab"
-            >关闭其它</el-button
-          >
-        </li>
-        <li>
-          <el-button
-            type="text"
-            size="mini"
-            icon="el-icon-error"
-            @click="closeAllTabs"
-            >关闭所有</el-button
-          >
-        </li>
-      </ul>
-    </div>
-    <slot name="otherContainer"></slot>
-  </el-container>
-</template>
-<script>
-import { cloneDeep } from "lodash";
-import { throttle } from "lodash"; // 可选，用于性能优化
-import LeHeaderMenu from "./LeHeaderMenu.vue";
-export default {
-  name: "le-home",
-  components: { LeHeaderMenu },
-  props: {
-    extraDropdownItems: {
-      type: Array,
-      default: () => [],
-    },
-    companyInfo: {
-      type: Object,
-      default: () => ({}),
-    },
-    showClose: {
-      type: Boolean,
-      default: true,
-    },
-    // 顶部横向菜单数据，支持多级嵌套
-    // 数据结构: [{ id, name, title, icon, children: [...] }]
-    headerMenu: {
-      type: Array,
-      default: () => [],
-    },
-    // 是否显示顶部横向菜单
-    // true: 只要 headerMenu 有数据就显示
-    // false: 即使 headerMenu 有数据也不显示
-    showHeaderMenu: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  data() {
-    // var validatePass = (rule, value, callback) => {
-    //   if (value === "") {
-    //     callback(new Error("请输入密码"));
-    //   } else {
-    //     if (value.length < 8) {
-    //       callback(new Error("密码至少8位"));
-    //     } else {
-    //       if (this.ruleForm.confirmPwd !== "") {
-    //         this.$refs.ruleForm.validateField("confirmPwd	");
-    //       }
-    //       callback();
-    //     }
-    //   }
-    // };
-    // var validatePass2 = (rule, value, callback) => {
-    //   if (value === "") {
-    //     callback(new Error("请再次输入密码"));
-    //   } else if (value !== this.ruleForm.pwd) {
-    //     callback(new Error("两次输入密码不一致!"));
-    //   } else {
-    //     callback();
-    //   }
-    // };
-    return {
-      style: {
-        display: "block",
-      },
-
-      isHideMenu: false,
-      aside_open_close: true,
-      menuData: [],
-      title: "",
-      // cacheView: [],
-      // showChangePwd: false,
-      // showPerInfo: false,
-      username: "",
-      // changeUid: "",
-      tabNameCurrent: "",
-      tabsAll: [],
-      //右键菜单
-      contextMenuVisible: false,
-      menuLeft: 0,
-      menuTop: 0,
-      pwdinfo: "",
-      refreshKey: 0,
-      // 仅添加以下3个变量
-      isDragging: false,
-      asideWidth: 200, // 默认宽度，与原宽度一致
-      dragStartInfo: null, // {startX, startWidth}
-      // 系统设置对话框
-      sysSettingsVisible: false,
-      sysSettingsTab: "pwd",
-      sysPwdForm: {
-        oldPwd: "",
-        newPwd: "",
-        confirmPwd: "",
-      },
-      sysPwdRules: {
-        // oldPwd: [{ required: true, message: "请输入原密码", trigger: "blur" }],//
-        newPwd: [
-          { required: true, message: "请输入新密码", trigger: "blur" },
-          { min: 8, message: "密码至少8位", trigger: "blur" },
-        ],
-        confirmPwd: [
-          { required: true, message: "请再次输入新密码", trigger: "blur" },
-          {
-            validator: (rule, value, callback) => {
-              if (value !== this.sysPwdForm.newPwd) {
-                callback(new Error("两次输入密码不一致"));
-              } else {
-                callback();
-              }
-            },
-            trigger: "blur",
-          },
-        ],
-      },
-      sysPerForm: {
-        nick: "",
-        phone: "",
-      },
-      sysPerRules: {
-        nick: [{ required: true, message: "请输入昵称", trigger: "blur" }],
-        phone: [
-          { required: true, message: "请输入手机号", trigger: "blur" },
-          {
-            pattern: /^1[3-9]\d{9}$/,
-            message: "请输入正确的手机号",
-            trigger: "blur",
-          },
-        ],
-      },
-      // 当前皮肤名(响应式,供皮肤选择器和 UI 刷新使用)
-      currentSkin: "default",
-    };
-  },
-  computed: {
-    asideStyle() {
-      // 依赖 currentSkin 让 Vue 知道需要重算(getCssVar 读取 DOM 不是响应式的)
-      if (this.currentSkin) {
-        // 触发访问,建立依赖关系
-      }
-      if (this.isHideMenu) {
-        return {
-          width: "0px",
-          minWidth: "0px",
-          maxWidth: "0px",
-          flex: "0 0 0px",
-          backgroundColor: this.getCssVar("--le-color-aside-bg", "#3A3A3A"),
-        };
-      }
-      return {
-        width: `${this.asideWidth}px`,
-        minWidth: `${this.asideWidth}px`,
-        maxWidth: `${this.asideWidth}px`,
-        flex: `0 0 ${this.asideWidth}px`,
-        transition: this.isDragging ? "none" : "width 0.3s",
-        backgroundColor: this.getCssVar("--le-color-aside-bg", "#3A3A3A"),
-      };
-    },
-    // el-menu 的三个颜色 prop,绑定到 CSS 变量,实现主题切换
-    menuBackgroundColor() {
-      return this.currentSkin, this.getCssVar("--le-color-menu-bg", "#3A3A3A");
-    },
-    menuTextColor() {
-      return this.currentSkin, this.getCssVar("--le-color-aside-text", "#fff");
-    },
-    menuActiveTextColor() {
-      return (
-        this.currentSkin, this.getCssVar("--le-color-aside-active", "#ffd04b")
-      );
-    },
-    // header 横向菜单:综合判断 showHeaderMenu + headerMenu 数据 + 过滤隐藏项
-    effectiveHeaderMenu() {
-      if (!this.showHeaderMenu) return [];
-      if (!this.headerMenu || !this.headerMenu.length) return [];
-      return this._filterHiddenMenus(this.headerMenu);
-    },
-    // header 横向菜单颜色(跟随主题)
-    headerMenuBgColor() {
-      return (
-        this.currentSkin, this.getCssVar("--le-color-header-bg", "#212121")
-      );
-    },
-    headerMenuTextColor() {
-      return this.currentSkin, this.getCssVar("--le-color-aside-text", "#fff");
-    },
-    headerMenuActiveTextColor() {
-      return (
-        this.currentSkin, this.getCssVar("--le-color-aside-active", "#ffd04b")
-      );
-    },
-    // 皮肤列表(供下拉子菜单渲染)
-    availableSkins() {
-      return [
-        { name: "default", label: "默认蓝", color: "#409eff" },
-        { name: "dark", label: "深色", color: "#0f172a" },
-        { name: "green", label: "翠绿", color: "#00b96b" },
-      ];
-    },
-  },
-  mounted() {
-    this.username =
-      this.$store.getters.userinfo.nick || this.$store.getters.userinfo.account;
-    let tab_top_dom = document.getElementsByClassName("el-tabs_");
-    tab_top_dom[0].oncontextmenu = this.openContextMenu;
-    if (
-      this.companyInfo &&
-      this.companyInfo.name &&
-      this.companyInfo.name.length > 0
-    ) {
-      this.$store.commit("setCname", this.companyInfo.name);
-    }
-
-    // let dict = [
-    //   {
-    //     title: "是",
-    //     value: 1,
-    //   },
-    //   {
-    //     title: "否",
-    //     value: 0,
-    //   },
-    // ];
-
-    // this.$store.commit("setDict", dict);
-
-    const menus = cloneDeep(this.$store.getters.menu);
-    this.menuData = menus.filter(function (item) {
-      if (item.children) {
-        item.children = item.children.filter((child) => child.ishide === 0);
-      }
-      return item;
-    });
-    this.$emit("homeInit");
-    document.addEventListener("keydown", this.handleKeyDown);
-
-    // 监听全局鼠标事件
-    document.addEventListener("mousemove", this.handleDrag);
-    document.addEventListener("mouseup", this.stopDrag);
-
-    // 2026-08-26:监听主题切换事件,更新响应式皮肤名触发 computed 重算
-    this._themeChangeHandler = (e) => {
-      const skinName =
-        (e && e.detail) ||
-        (this.$leTheme && this.$leTheme.current) ||
-        "default";
-      // 更新 currentSkin 后,所有依赖 currentSkin 的 computed 会自动重算
-      // 包括 asideStyle, menuBackgroundColor, menuTextColor, headerMenuBgColor 等
-      this.currentSkin = skinName;
-    };
-    // 初始化当前皮肤名
-    if (this.$leTheme) {
-      this.currentSkin = this.$leTheme.current;
-    }
-    if (typeof window !== "undefined") {
-      window.addEventListener("le-theme-change", this._themeChangeHandler);
-    }
-  },
-
-  watch: {
-    contextMenuVisible() {
-      if (this.contextMenuVisible) {
-        document.body.addEventListener("click", this.closeMenu);
-      } else {
-        document.body.removeEventListener("click", this.closeMenu);
-      }
-    },
-  },
-  beforeDestroy() {
-    document.removeEventListener("keydown", this.handleKeyDown);
-    document.removeEventListener("mousemove", this.handleDrag);
-    document.removeEventListener("mouseup", this.stopDrag);
-    if (typeof window !== "undefined" && this._themeChangeHandler) {
-      window.removeEventListener("le-theme-change", this._themeChangeHandler);
-    }
-    this.stopDrag();
-  },
-  methods: {
-    // 递归过滤隐藏菜单项(ishide === 1 的项被过滤,其子项也一并丢弃)
-    _filterHiddenMenus(list) {
-      if (!Array.isArray(list)) return [];
-      return list
-        .filter((item) => item.ishide !== 1)
-        .map((item) => {
-          if (item.children && item.children.length) {
-            return {
-              ...item,
-              children: this._filterHiddenMenus(item.children),
-            };
-          }
-          return item;
-        });
-    },
-    // 2026-08-26:读取 CSS 变量的 helper,返回指定变量值(回退到 fallback)
-    getCssVar(name, fallback) {
-      try {
-        const v = getComputedStyle(document.documentElement)
-          .getPropertyValue(name)
-          .trim();
-        return v || fallback;
-      } catch (e) {
-        return fallback;
-      }
-    },
-    // header 横向菜单项点击处理(复用 clickMenuItem 的导航逻辑)
-    handleHeaderMenuSelect(item) {
-      this.clickMenuItem(item);
-    },
-    handleKeyDown(e) {
-      // F5 键的 keyCode 是 116
-      if (e.keyCode === 116) {
-        e.preventDefault(); // 阻止默认刷新行为
-        this.refreshView();
-      }
-    },
-    refreshView() {
-      this.refreshKey++;
-      // 可以添加一些视觉反馈
-      this.$message.success("数据已刷新");
-    },
-    openContextMenu(e) {
-      e.preventDefault(); //防止默认菜单弹出
-      this.contextMenuVisible = true;
-
-      this.menuLeft = e.clientX;
-      this.menuTop = e.clientY + 20;
-    },
-    closeMenu() {
-      this.contextMenuVisible = false;
-    },
-    closeOtherTab() {
-      this.tabsAll = this.tabsAll.filter(
-        (item) => item.name == this.tabNameCurrent,
-      );
-    },
-    closeAllTabs() {
-      this.contextMenuVisible = false;
-      this.tabNameCurrent = "";
-      this.tabsAll = [];
-      this.$router.push({ path: "/home" });
-    },
-    //解决空白标签页右键
-    openContextMenu1(e) {
-      if (e.srcElement.id != "") {
-        this.contextMenuVisible = true;
-        //这个参数是获取右键标签页的id属性，应该和你的key有关，你要截取-后面部分的
-        this.closeindex = e.srcElement.id.split("-")[1]; //
-      } else {
-        this.contextMenuVisible = false;
-      }
-    },
-    handleCommand(command) {
-      if (command === "openSysSettings") {
-        this.sysSettingsTab = "pwd";
-        this.sysPwdForm = { oldPwd: "", newPwd: "", confirmPwd: "" };
-        this.sysPerForm = {
-          nick: this.$store.getters.userinfo.nick || "",
-          phone: this.$store.getters.userinfo.phone || "",
-        };
-        this.sysSettingsVisible = true;
-      } else if (command === "2") {
-        this.signout();
-      } else {
-        this.$emit("command", command); // 抛出外部命令
-      }
-    },
-    changPwd() {
-      this.sysSettingsTab = "pwd";
-      this.sysPwdForm = { oldPwd: "", newPwd: "", confirmPwd: "" };
-      this.sysPerForm = {
-        nick: this.$store.getters.userinfo.nick || "",
-        phone: this.$store.getters.userinfo.phone || "",
-      };
-      this.sysSettingsVisible = true;
-    },
-    // 系统设置 - 提交修改密码
-    submitSysPwd() {
-      this.$refs.sysPwdForm.validate((valid) => {
-        if (valid) {
-          const payload = {
-            uid: this.$store.getters.userinfo.id,
-            pwd: this.sysPwdForm.newPwd,
-            confirmPwd: this.sysPwdForm.confirmPwd,
-          };
-          // 方案一:emit 给宿主,由宿主决定如何调用接口
-          this.$emit("userChangePwd", payload, this.changePwdAfter);
-        }
-      });
-    },
-    // 系统设置 - 提交修改个人信息
-    submitSysPer() {
-      this.$refs.sysPerForm.validate((valid) => {
-        if (valid) {
-          const payload = {
-            uid: this.$store.getters.userinfo.id,
-            nick: this.sysPerForm.nick,
-            phone: this.sysPerForm.phone,
-          };
-          this.$emit("savePerInfo", payload, () => {
-            this.sysSettingsVisible = false;
-            try {
-              let userinfo = this.$store.getters.userinfo;
-              if (userinfo) {
-                userinfo.nick = payload.nick;
-                userinfo.phone = payload.phone;
-                this.$store.commit("setUserInfo", userinfo);
-              }
-            } catch (e) {}
-          });
-        }
-      });
-    },
-    // 系统设置 - 选择皮肤
-    selectSkin(skinName) {
-      this.$leTheme.set(skinName);
-      this.$message.success("皮肤切换成功");
-    },
-    validatePhone(phone) {
-      const phoneRegex = /^1[3-9]\d{9}$/;
-      return phoneRegex.test(phone);
-    },
-
-    changePwdAfter(res) {
-      if (res && res.data && res.data.code == "10000") {
-        this.$message.success("更新成功");
-        this.sysSettingsVisible = false;
-        localStorage.clear();
-        this.$store.commit("setUserInfo", null);
-        this.$router.replace({ path: "/" });
-      } else {
-        this.pwdinfo = res;
-      }
-    },
-    signout() {
-      this.$confirm("退出登录, 是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      }).then(() => {
-        this.$router.push({ path: "/" });
-        localStorage.clear();
-      });
-    },
-    clickMenuItem(item) {
-      this.style.display = "none";
-
-      if (item.name === this.tabNameCurrent) {
-        this.$message.info("当前页面已经打开");
-        return;
-      }
-
-      // 查找是否已经存在相同name的标签页
-      const existingTabIndex = this.tabsAll.findIndex(
-        (tab) => tab.name === item.name,
-      );
-
-      if (existingTabIndex > -1) {
-        // 已存在，用新的替换
-        const newTab = this._createTabItem(item);
-        this.tabsAll[existingTabIndex] = newTab;
-
-        // 如果替换的是当前激活的标签页，需要跳转
-        if (this.tabNameCurrent === item.name) {
-          this.$router.push(newTab);
-        } else {
-          // 如果替换的不是当前激活的标签页，设置当前激活并跳转
-          this.tabNameCurrent = newTab.name;
-          this.$router.push(newTab);
-        }
-      } else {
-        this._navi2Page(item);
-      }
-    },
-    _createTabItem(item) {
-      let value;
-      if (item.param) {
-        value = {
-          name: item.name,
-          title: item.title,
-          params: {
-            status: item.param,
-            btns: item.btns,
-          },
-        };
-      } else {
-        if (item.component && item.component != "") {
-          value = {
-            name: item.name,
-            title: item.title,
-            params: {
-              btns: item.btns,
-            },
-          };
-        }
-      }
-      return value;
-    },
-    _navi2Page(item) {
-      const value = this._createTabItem(item);
-      if (!value) return; // 防止空值
-
-      this.tabNameCurrent = value.name;
-      if (this.tabsAll && this.tabsAll.length >= 8) {
-        let elen = this.tabsAll.length;
-        this.tabsAll[elen - 1] = value;
-      } else {
-        this.tabsAll.push(value);
-      }
-      this.$router.push(value);
-    },
-    handleTabClick(clickTab, event) {
-      // if (clickTab.name == this.tabNameCurrent) return;
-      let tabs = this.tabsAll;
-      let currentTab;
-      tabs.forEach((tab, index) => {
-        if (tab.name === clickTab.name) {
-          currentTab = tab;
-        }
-      });
-      this.$router.push(currentTab);
-    },
-    removeTab(targetName) {
-      let tabs = this.tabsAll;
-      let nextTab;
-      tabs.forEach((tab, index) => {
-        if (tab.name == targetName) {
-          nextTab = tabs[index + 1] || tabs[index - 1];
-          if (nextTab) {
-            this.tabNameCurrent = nextTab.name;
-          }
-        }
-      });
-      this.tabsAll = tabs.filter((tab) => tab.name !== targetName);
-      if (nextTab) {
-        this.$router.push(nextTab);
-      } else {
-        this.tabNameCurrent = "";
-        this.$router.push("/Home");
-      }
-    },
-    clickTitle() {
-      this.style.display = "block";
-    },
-    asidechange() {
-      this.isHideMenu = !this.isHideMenu;
-      if (this.isHideMenu) {
-        this.aside_open_close = false;
-      } else {
-        this.aside_open_close = true;
-        // 确保展开时使用当前保存的宽度
-        const savedWidth = localStorage.getItem("le-aside-width");
-        if (savedWidth) {
-          this.asideWidth = parseInt(savedWidth, 10);
-        }
-      }
-    },
-    shouldShowTooltip(text) {
-      return text && text.length > 8;
-    },
-    clickLeftTop() {
-      this.$emit("clickLeftTop");
-    },
-    startDrag(e) {
-      e.preventDefault();
-      e.stopPropagation();
-
-      this.isDragging = true;
-      this.dragStartInfo = {
-        startX: e.clientX,
-        startWidth: this.asideWidth,
-      };
-
-      document.body.style.cursor = "col-resize";
-      document.body.style.userSelect = "none";
-
-      // 临时添加事件监听（更可靠）
-      window.addEventListener("mousemove", this.handleDrag);
-      window.addEventListener("mouseup", this.stopDrag);
-    },
-
-    handleDrag(e) {
-      if (!this.isDragging || !this.dragStartInfo) return;
-
-      e.preventDefault();
-      e.stopPropagation();
-
-      const diff = e.clientX - this.dragStartInfo.startX;
-      let newWidth = this.dragStartInfo.startWidth + diff;
-
-      // 限制宽度范围（150-500px）
-      newWidth = Math.max(150, Math.min(500, newWidth));
-
-      // 更新数据
-      this.asideWidth = newWidth;
-
-      // 直接操作 DOM 确保生效
-      const asideEl = this.$refs.asideRef?.$el;
-      if (asideEl) {
-        asideEl.style.width = `${newWidth}px`;
-        asideEl.style.minWidth = `${newWidth}px`;
-        asideEl.style.maxWidth = `${newWidth}px`;
-        asideEl.style.flex = `0 0 ${newWidth}px`;
-      }
-    },
-
-    stopDrag() {
-      if (this.isDragging) {
-        this.isDragging = false;
-        this.dragStartInfo = null;
-
-        // 移除临时事件监听
-        window.removeEventListener("mousemove", this.handleDrag);
-        window.removeEventListener("mouseup", this.stopDrag);
-
-        // 保存到 localStorage
-        localStorage.setItem("le-aside-width", this.asideWidth.toString());
-
-        // 恢复样式
-        document.body.style.cursor = "";
-        document.body.style.userSelect = "";
-      }
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.le-home-cp-container {
-  height: 100vh;
-  font-size: 15px;
-
-  .header {
-    background-color: var(--le-color-header-bg) !important;
-    color: #fff;
-    height: 60px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-
-    /* 清除 Element UI el-row / el-col 默认背景 */
-    .el-row,
-    .el-col {
-      background-color: transparent !important;
-    }
-
-    /* 清除 grid-content / bg-purple 等示例类的默认背景 */
-    .grid-content,
-    .bg-purple,
-    .bg-purple-light {
-      background-color: transparent !important;
-    }
-
-    .header-row {
-      height: 60px;
-    }
-
-    .leftsection,
-    .middlesection,
-    .rightsection {
-      height: 60px;
-      line-height: 60px;
-      display: flex;
-      align-items: center;
-    }
-
-    .leftsection {
-      .userinfo-inner {
-        font-size: 18px;
-        font-weight: bold;
-        cursor: pointer;
-      }
-    }
-
-    .middlesection {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      padding: 0 16px;
-
-      .header-menu {
-        border-bottom: none;
-        height: 60px;
-        line-height: 60px;
-        width: 100%;
-
-        /* 菜单项悬停/激活色 */
-        .el-menu-item,
-        .el-submenu__title {
-          height: 60px;
-          line-height: 60px;
-          border-bottom: none;
-          font-size: 15px;
-          min-width: 100px;
-          text-align: center;
-
-          &:hover {
-            background-color: rgba(255, 255, 255, 0.1) !important;
-          }
-        }
-
-        .el-submenu__icon-arrow {
-          font-size: 12px;
-          margin-left: 4px;
-        }
-
-        .el-menu-item.is-active {
-          border-bottom: 2px solid var(--le-color-aside-active);
-        }
-      }
-    }
-
-    .rightsection {
-      justify-content: flex-end;
-
-      .el-dropdown-link {
-        cursor: pointer;
-        color: #fff;
-      }
-    }
-  }
-
-  /* 修改 .aside 样式 - 移除固定宽度 !important */
-  .aside {
-    background: var(--le-color-aside-bg);
-    color: var(--le-color-aside-text);
-    /* 移除 width: 200px !important */
-    transform: width 0.5s;
-    position: relative;
-    /* 添加弹性布局相关属性 */
-    flex-shrink: 0 !important;
-    overflow: visible !important;
-    height: calc(100vh - 60px);
-    display: flex;
-    flex-direction: column;
-
-    /* 拖动条样式 */
-    .drag-handle {
-      position: absolute;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      width: 1px; /* 从6px改为4px */
-      cursor: col-resize;
-      z-index: 1000;
-      background-color: transparent;
-
-      &:hover {
-        background-color: var(--le-color-aside-handle-hover);
-        width: 4px; /* 确保hover时也是4px */
-      }
-
-      &:active {
-        background-color: var(--le-color-aside-handle-active);
-      }
-    }
-
-    &.aside_hide {
-      width: 0px !important;
-      min-width: 0 !important;
-      max-width: 0 !important;
-      flex: 0 0 0 !important;
-      overflow: hidden !important;
-
-      .drag-handle {
-        display: none !important;
-      }
-    }
-  }
-
-  .el-aside {
-    height: calc(100vh - 60px);
-  }
-
-  .el-main {
-    height: calc(100vh - 60px);
-    // overflow: hidden !important;
-    flex: 1;
-
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    padding: 10px 20px;
-  }
-
-  .el-main > div:last-child {
-    flex: 1;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .el-main > div:last-child > *:last-child {
-    flex: 1;
-    min-height: 0;
-  }
-
-  .menu {
-    background: none;
-    color: var(--le-color-aside-text);
-    flex: 1;
-    overflow-y: auto;
-  }
-
-  .main {
-    position: relative;
-    color: var(--le-color-header-bg);
-  }
-
-  .headerlogo {
-    line-height: 60px;
-    margin-top: 10px;
-  }
-
-  .rightsection {
-    line-height: 60px;
-    text-align: right;
-  }
-
-  .leftsection {
-    line-height: 60px;
-    text-align: start;
-    font-size: 22px;
-  }
-
-  .userinfo-inner {
-    margin-left: 20px;
-    cursor: pointer;
-  }
-
-  .userinfo-inner-t {
-    color: #fff !important;
-    font-size: 18px;
-    cursor: pointer;
-  }
-
-  .el-icon-arrow-down {
-    font-size: 16px;
-  }
-
-  .el-dropdown-menu__item {
-    font-size: 15px !important;
-  }
-
-  .logofont {
-    font-size: 25px;
-    padding-bottom: 10px;
-    line-height: 60px;
-  }
-
-  .cursor {
-    cursor: pointer;
-  }
-
-  .aside_open_close {
-    position: absolute;
-    left: 0;
-    top: 25%;
-    width: 16px;
-    height: 60px;
-    line-height: 60px;
-    color: #fff;
-    background-color: var(--le-color-aside-toggle-bg);
-    border-radius: 0 6px 6px 0;
-    font-size: 20px;
-    z-index: 1000;
-    cursor: pointer;
-  }
-
-  .aside_open_close:hover {
-    background-color: var(--le-color-aside-toggle-hover);
-    color: #fff;
-  }
-
-  .grid-content {
-  }
-
-  .bg-purple-light {
-    display: flex;
-    display: -webkit-flex;
-    justify-content: flex-end;
-    align-content: center;
-    align-items: center;
-    column-gap: 6px;
-  }
-
-  .contextmenu {
-    width: 100px;
-    margin: 0;
-    border: 1px solid var(--le-color-contextmenu-border);
-    background: var(--le-color-contextmenu-bg);
-    z-index: 3000;
-    position: absolute;
-    list-style-type: none;
-    padding: 5px 0;
-    border-radius: 4px;
-    font-size: 14px;
-    color: var(--le-color-contextmenu-text);
-    box-shadow: 2px 2px 3px 0 var(--le-color-contextmenu-shadow);
-
-    .li {
-      margin: 0;
-      padding: 0px 2px;
-
-      :hover {
-        background: var(--le-color-contextmenu-hover);
-        cursor: pointer;
-      }
-
-      .button {
-        color: var(--le-color-contextmenu-text);
-      }
-    }
-  }
-}
-
-.img {
-  width: 20px;
-  height: 20px;
-}
-
-::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-  background-color: transparent;
-}
-
-.menuItem {
-  .menu-item-text {
-    display: inline-block;
-    max-width: calc(100% + 25px);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
-.rounded-dialog {
-  border-radius: 12px !important;
-  overflow: hidden;
-}
-
-/* 皮肤选择器样式 */
-.skin-picker {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 16px 0;
-}
-
-.skin-item {
-  display: flex;
-  align-items: center;
-  padding: 12px 16px;
-  border: 2px solid var(--le-color-border);
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover {
-    border-color: var(--le-color-primary);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  }
-
-  &.active {
-    border-color: var(--le-color-primary);
-    background-color: var(--le-color-primary-light-9);
-  }
-}
-
-.skin-color {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  margin-right: 16px;
-  flex-shrink: 0;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.skin-info {
-  flex: 1;
-}
-
-.skin-name {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--le-color-text-strong);
-}
-
-.skin-desc {
-  font-size: 12px;
-  color: var(--le-color-primary);
-  margin-top: 2px;
-}
-
-.skin-check {
-  font-size: 20px;
-  color: var(--le-color-primary);
-}
-</style>
-<style lang="scss">
-/* header 菜单弹出层样式(挂在 body 上,需全局样式)
-   弹出层不受 el-menu prop 控制,需手动设置背景色与 header 一致 */
-.le-header-menu-popper {
-  background-color: var(--le-color-header-bg) !important;
-
-  .el-menu {
-    border-right: none;
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
-    min-width: 160px;
-    background-color: var(--le-color-header-bg) !important;
-  }
-
-  .el-menu-item,
-  .el-submenu__title {
-    height: 40px;
-    line-height: 40px;
-    border-bottom: none;
-    padding: 0 20px;
-    min-width: 160px;
-    font-size: 14px;
-    background-color: var(--le-color-header-bg) !important;
-    color: var(--le-color-aside-text) !important;
-
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.1) !important;
-    }
-  }
-
-  .el-menu-item.is-active {
-    color: var(--le-color-aside-active) !important;
-    background-color: rgba(255, 255, 255, 0.1) !important;
-  }
-
-  .el-submenu__icon-arrow {
-    float: right;
-    margin-right: 0;
-    color: var(--le-color-aside-text) !important;
-  }
-}
-
-/* 用户下拉菜单(系统设置/皮肤选择)全局样式 */
-.el-dropdown-menu {
-  .el-dropdown-menu__item {
-    position: relative;
-
-    &.skin-active {
-      color: var(--le-color-aside-active);
-    }
-  }
-}
-</style>