leisure-core 1.0.2 → 1.0.3

package/le-home/src/main.vue

@@ -0,0 +1,1307 @@
+<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() {},
+    // 系统设置 - 提交修改密码
+    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>