leisure-core 0.6.91 → 0.6.93

package/PROJECT_GUIDE.md

@@ -47,14 +47,13 @@ leisure-core/
 │   └── directives/src/           # （预留指令目录，当前为空）
 ├── le-theme/                     # 主题资源 + 一键换肤服务
 │   ├── common/
-│   │   ├── var.scss              # SCSS 变量（编译期用）
 │   │   └── vars.css              # CSS 自定义属性层（运行时换肤用）+ Element UI primary 覆盖
 │   ├── iconfont/                 # 字体图标（css + ttf/woff/woff2）
 │   ├── pages/index.css           # 页面样式
 │   └── index.js                  # LeTheme 主题服务（set/register/init）
 └── le-*/                         # 各功能组件（共 36 个，见下文）
     ├── index.js                  # 组件注册入口（标准 install 模式）
-    └── src/main.vue              # 组件实现（部分含 rmixins.js 等辅助文件）
+    └── src/main.vue              # 组件实现（部分含 LeHeaderMenu.vue / rmixins.js 等辅助文件）
 ```
 
 ## 4. 架构约定
@@ -152,7 +151,6 @@ export default LeXxx;
 
 | 文件              | 作用                                                                                      |
 | ----------------- | ----------------------------------------------------------------------------------------- |
-| `common/var.scss` | SCSS 变量（编译期用）                                                                     |
 | `common/vars.css` | **CSS 自定义属性层**（运行时换肤的核心），定义全部语义变量 + 覆盖 Element UI primary 色族 |
 | `pages/index.css` | 页面级样式                                                                                |
 | `iconfont/`       | 字体图标                                                                                  |
@@ -160,32 +158,40 @@ export default LeXxx;
 
 ### 6.2 CSS 变量层（`common/vars.css`）
 
-在 `:root` 上定义约 30 个语义化变量，分为 4 组：
+在 `:root` 上定义约 40 个语义化变量，分为 6 组：
 
 **品牌色族**
 
-- `--le-color-primary`、`--le-color-primary-light`、`--le-color-primary-dark`、`--le-color-primary-shadow`
+- `--le-color-primary`、`--le-color-primary-2`、`--le-color-primary-light`、`--le-color-primary-light-1`、`--le-color-primary-light-9`
+- `--le-color-primary-shadow`、`--le-color-primary-shadow-strong`、`--le-color-primary-shadow-soft`
 
-**功能色族**
+**功能色**
 
-- `--le-color-success`、`--le-color-warning`、`--le-color-danger`、`--le-color-info`
+- `--le-color-success`、`--le-color-success-2`、`--le-color-success-shadow`
 
-**文本 / 边框 / 容器**
+**文本**
 
-- `--le-color-text-primary`、`--le-color-text-regular`、`--le-color-text-secondary`
-- `--le-color-border`、`--le-color-container`、`--le-color-bg`
+- `--le-color-text-strong`、`--le-color-text-regular`、`--le-color-text-muted`
+- `--le-color-text-form`、`--le-color-input-text`、`--le-color-on-dark`
+
+**边框 / 容器 / 卡片 / 装饰**
+
+- `--le-color-border`、`--le-color-border-hover`、`--le-color-border-dark`
+- `--le-color-card-bg`、`--le-color-card-border`、`--le-color-card-shadow`
+- `--le-color-input-bg`、`--le-color-placeholder`
+- `--le-color-section-bg-from`、`--le-color-section-bg-to`
 
 **le-home 框架色**（一键换肤必覆盖）
 
 - `--le-color-header-bg`、`--le-color-aside-bg`、`--le-color-menu-bg`
 - `--le-color-aside-text`、`--le-color-aside-active`
 - `--le-color-aside-handle-hover`、`--le-color-aside-handle-active`
-- `--le-color-aside-toggle-bg`、`--le-color-aside-toggle-color`、`--le-color-aside-toggle-active-bg`
-- `--le-color-contextmenu-bg`、`--le-color-contextmenu-color`、`--le-color-contextmenu-hover`
+- `--le-color-aside-toggle-bg`、`--le-color-aside-toggle-hover`
+- `--le-color-contextmenu-bg`、`--le-color-contextmenu-border`、`--le-color-contextmenu-text`、`--le-color-contextmenu-hover`、`--le-color-contextmenu-shadow`
 
 **Element UI primary 覆盖**（让 `type="primary"` 按钮跟随换肤）
 
-- `.el-button--primary`、`.el-tag--primary`、`.el-checkbox`、`.el-radio`、`.el-switch`、`.el-pagination`、`.el-tabs`、`.el-link` 等选择器的 `color/background/border` 均绑定到 `--le-color-primary*` 变量
+- `.el-button--primary`、`.el-tag--primary`、`.el-checkbox`、`.el-radio`、`.el-switch`、`.el-slider`、`.el-pagination`、`.el-tabs`、`.el-link`、`.el-loading-spinner` 等选择器的 `color/background/border` 均绑定到 `--le-color-primary*` 变量
 
 ### 6.3 LeTheme 服务（`index.js`）
 
@@ -193,11 +199,11 @@ export default LeXxx;
 
 **预置皮肤**
 
-| 皮肤名    | 主色           | 用途     |
-| --------- | -------------- | -------- |
-| `default` | 蓝色 `#3b82f6` | 当前默认 |
-| `dark`    | 深色背景       | 暗色模式 |
-| `green`   | 绿色 `#22c55e` | 绿色主色 |
+| 皮肤名    | 主色              | 用途                                      |
+| --------- | ----------------- | ----------------------------------------- |
+| `default` | `#409eff`（蓝色） | 当前默认（依赖 `:root` 变量，无额外覆盖） |
+| `dark`    | `#3b82f6`（深蓝） | 暗色模式                                  |
+| `green`   | `#00b96b`（翠绿） | 绿色主色                                  |
 
 **API**
 
@@ -230,16 +236,27 @@ this.$leTheme.current; // "dark"
 
 ```js
 // 方式 A：CSS 直接消费（静态样式）
-.hello { color: var(--le-color-text-primary); }
+.hello { color: var(--le-color-text-strong); }
 
 // 方式 B：el-menu 等需要 prop 传值的场景
+// getCssVar 必须定义在 methods 里（Vue 2 computed 不支持形参）
+methods: {
+  getCssVar(name, fallback) {
+    try {
+      const v = getComputedStyle(document.documentElement)
+        .getPropertyValue(name).trim();
+      return v || fallback;
+    } catch (e) { return fallback; }
+  }
+},
 computed: {
   menuBackgroundColor() {
     return this.getCssVar('--le-color-menu-bg', '#3a3a3a');
   }
 },
 mounted() {
-  window.addEventListener('le-theme-change', () => this.$forceUpdate());
+  this._themeChangeHandler = () => this.$forceUpdate();
+  window.addEventListener('le-theme-change', this._themeChangeHandler);
 }
 ```
 
@@ -432,13 +449,25 @@ mounted() {
 
 ### 8.21 le-home
 
-- **Props**：`extraDropdownItems`、`companyInfo`、`showClose`
-- **Slots**：`otherContainer`
+- **Props**：`extraDropdownItems`、`companyInfo`、`showClose`、`headerMenu`、`showHeaderMenu`
+- **Slots**：`otherContainer`、`rightComment`
 - **Events**：`homeInit`、`command(command)`（修改密码/退出之外的命令）、`userChangePwd(params, callback)`
+- **子组件**：`LeHeaderMenu`（`src/LeHeaderMenu.vue`，递归菜单组件，支持任意深度嵌套）
 - **行为**：挂载后注册键盘/鼠标事件，内置修改密码弹窗
+- **Header 布局**：
+  - 三栏结构：左（品牌名）/ 中（横向菜单，可选）/ 右（用户下拉）
+  - 有 headerMenu 时 span 为 `4:12:8`，无时为 `8:0:16`
+  - 通过 `showHeaderMenu` prop 显式控制是否显示横向菜单
+- **headerMenu 数据结构**：`[{ id, name, title, icon, children: [...] }]`，支持任意深度嵌套
+- **关键方法**：
+  - `_filterHiddenMenus(list)`：递归过滤 `ishide === 1` 的菜单项
+  - `handleHeaderMenuSelect(item)`：复用侧边栏导航逻辑
+  - `getCssVar(name, fallback)`：读 CSS 变量的 helper（定义在 methods 里）
+- **关键 computed**：`effectiveHeaderMenu`、`headerMenuBgColor`、`headerMenuTextColor`、`headerMenuActiveTextColor`
 - **样式换肤支持**：
   - 顶部 header 背景 / aside 背景 / 拖动条 / aside_open_close / contextmenu 全部使用 `var(--le-color-*)`
-  - `el-menu` 通过 `background-color` / `text-color` / `active-text-color` prop 动态绑定 CSS 变量（computed + `getCssVar`）
+  - el-menu 通过 `background-color` / `text-color` / `active-text-color` prop 动态绑定 CSS 变量（computed + `getCssVar`）
+  - 横向菜单弹出层通过全局 `.le-header-menu-popper` 样式绑定 header 背景色
   - 监听 `window` 级 `le-theme-change` 事件，回调里 `$forceUpdate` 强制刷新 el-menu 的 prop
 
 ### 8.22 le-area

package/le-home/src/LeHeaderMenu.vue

@@ -0,0 +1,60 @@
+<template>
+  <!-- 有子项:渲染为 submenu(一级横向 / 下级下拉均支持) -->
+  <el-submenu
+    v-if="hasChildren"
+    :index="item.name"
+    popper-class="le-header-menu-popper"
+  >
+    <template slot="title">
+      <i v-if="item.icon" :class="item.icon"></i>
+      <span>{{ item.title }}</span>
+    </template>
+    <!-- 递归渲染子节点 -->
+    <le-header-menu
+      v-for="child in visibleChildren"
+      :key="child.id || child.name"
+      :item="child"
+      :level="level + 1"
+      :on-select="onSelect"
+    ></le-header-menu>
+  </el-submenu>
+  <!-- 叶子节点:渲染为 menu-item -->
+  <el-menu-item v-else :index="item.name" @click="handleClick">
+    <i v-if="item.icon" :class="item.icon"></i>
+    <span>{{ item.title }}</span>
+  </el-menu-item>
+</template>
+
+<script>
+export default {
+  name: "LeHeaderMenu",
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+    level: {
+      type: Number,
+      default: 0,
+    },
+    onSelect: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  computed: {
+    hasChildren() {
+      return Array.isArray(this.item.children) && this.item.children.length > 0;
+    },
+    visibleChildren() {
+      if (!this.item.children) return [];
+      return this.item.children.filter((child) => child.ishide !== 1);
+    },
+  },
+  methods: {
+    handleClick() {
+      this.onSelect(this.item);
+    },
+  },
+};
+</script>

package/le-home/src/main.vue

@@ -1,15 +1,41 @@
 <template>
   <el-container class="le-home-cp-container">
     <el-header class="header">
-      <el-row>
-        <el-col :span="14" class="leftsection">
+      <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 :span="10" class="rightsection">
+        <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">
@@ -19,8 +45,6 @@
                 <i class="el-icon-arrow-down el-icon--right"></i>
               </span>
               <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item command="1">修改密码</el-dropdown-item>
-                <!-- <el-dropdown-item command="3">个人信息</el-dropdown-item> -->
                 <el-dropdown-item
                   v-for="item in extraDropdownItems"
                   :key="item.command"
@@ -29,7 +53,12 @@
                 >
                   {{ item.label }}
                 </el-dropdown-item>
-                <el-dropdown-item command="2">退出</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>
@@ -44,6 +73,7 @@
         ref="asideRef"
       >
         <el-menu
+          ref="sideMenu"
           :unique-opened="true"
           class="menu"
           :background-color="menuBackgroundColor"
@@ -108,7 +138,7 @@
         </div>
       </el-main>
     </el-container>
-    <el-dialog
+    <!-- <el-dialog
       title="修改密码"
       ref="elDialog"
       :visible.sync="showChangePwd"
@@ -161,8 +191,8 @@
           >确认修改</el-button
         >
       </div>
-    </el-dialog>
-    <le-dialog-container :showDialog="showPerInfo" title="个人信息" width="30%">
+    </el-dialog> -->
+    <!-- <le-dialog-container :showDialog="showPerInfo" title="个人信息" width="30%">
       <le-list-form
         :formColumns="formColumns"
         :formData="perInfo"
@@ -171,7 +201,119 @@
         @closeDialog="cancelChangePerInfo"
         @saveData="savePerInfo"
       ></le-list-form>
-    </le-dialog-container>
+    </le-dialog-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="oldPwd">
+              <el-input
+                v-model="sysPwdForm.oldPwd"
+                type="password"
+                placeholder="请输入原密码"
+                show-password
+              ></el-input>
+            </el-form-item>
+            <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' }"
@@ -203,8 +345,10 @@
 <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,
@@ -218,32 +362,45 @@ export default {
       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();
-      }
-    };
+    // 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",
@@ -253,29 +410,29 @@ export default {
       aside_open_close: true,
       menuData: [],
       title: "",
-      cacheView: [],
-      showChangePwd: false,
-      showPerInfo: false,
+      // cacheView: [],
+      // showChangePwd: false,
+      // showPerInfo: false,
       username: "",
-      changeUid: "",
+      // changeUid: "",
       tabNameCurrent: "",
       tabsAll: [],
-      ruleForm: {
-        pwd: "",
-        confirmPwd: "",
-      },
-      formColumns: [
-        { prop: "nick", label: "昵称" },
-        { prop: "phone", label: "手机号" },
-      ],
-      perInfo: {
-        nick: this.$store.getters.userinfo.nick,
-        phone: this.$store.getters.userinfo.phone,
-      },
-      rules: {
-        pwd: [{ validator: validatePass, trigger: "blur" }],
-        confirmPwd: [{ validator: validatePass2, trigger: "blur" }],
-      },
+      // ruleForm: {
+      //   pwd: "",
+      //   confirmPwd: "",
+      // },
+      // formColumns: [
+      //   { prop: "nick", label: "昵称" },
+      //   { prop: "phone", label: "手机号" },
+      // ],
+      // perInfo: {
+      //   nick: this.$store.getters.userinfo.nick,
+      //   phone: this.$store.getters.userinfo.phone,
+      // },
+      // rules: {
+      //   pwd: [{ validator: validatePass, trigger: "blur" }],
+      //   confirmPwd: [{ validator: validatePass2, trigger: "blur" }],
+      // },
       //右键菜单
       contextMenuVisible: false,
       menuLeft: 0,
@@ -286,16 +443,66 @@ export default {
       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 {
@@ -304,19 +511,48 @@ export default {
         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"),
       };
     },
-    // 读取 CSS 变量的 helper,返回指定变量值(回退到 fallback)
-    // 注意:此函数必须放在 methods 里,不能放在 computed 里,否则会被当成无参 computed 而非方法
     // el-menu 的三个颜色 prop,绑定到 CSS 变量,实现主题切换
     menuBackgroundColor() {
-      return this.getCssVar("--le-color-menu-bg", "#3A3A3A");
+      return this.currentSkin, this.getCssVar("--le-color-menu-bg", "#3A3A3A");
     },
     menuTextColor() {
-      return this.getCssVar("--le-color-aside-text", "#fff");
+      return this.currentSkin, this.getCssVar("--le-color-aside-text", "#fff");
     },
     menuActiveTextColor() {
-      return this.getCssVar("--le-color-aside-active", "#ffd04b");
+      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() {
@@ -332,18 +568,18 @@ export default {
       this.$store.commit("setCname", this.companyInfo.name);
     }
 
-    let dict = [
-      {
-        title: "是",
-        value: 1,
-      },
-      {
-        title: "否",
-        value: 0,
-      },
-    ];
+    // let dict = [
+    //   {
+    //     title: "是",
+    //     value: 1,
+    //   },
+    //   {
+    //     title: "否",
+    //     value: 0,
+    //   },
+    // ];
 
-    this.$store.commit("setDict", dict);
+    // this.$store.commit("setDict", dict);
 
     const menus = cloneDeep(this.$store.getters.menu);
     this.menuData = menus.filter(function (item) {
@@ -371,12 +607,20 @@ export default {
     document.addEventListener("mousemove", this.handleDrag);
     document.addEventListener("mouseup", this.stopDrag);
 
-    // 2026-08-26:监听主题切换事件,强制刷新 el-menu 的颜色 prop 绑定
-    this._themeChangeHandler = () => {
-      // 通过递增版本号触发 computed 重新求值(否则 computed 依赖不变不会重算)
-      this._themeVersion = (this._themeVersion || 0) + 1;
-      this.$forceUpdate();
+    // 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);
     }
@@ -401,6 +645,21 @@ export default {
     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 {
@@ -412,6 +671,10 @@ export default {
         return fallback;
       }
     },
+    // header 横向菜单项点击处理(复用 clickMenuItem 的导航逻辑)
+    handleHeaderMenuSelect(item) {
+      this.clickMenuItem(item);
+    },
     handleKeyDown(e) {
       // F5 键的 keyCode 是 116
       if (e.keyCode === 116) {
@@ -456,76 +719,128 @@ export default {
       }
     },
     handleCommand(command) {
-      if (command === "1") this.changPwd();
-      else if (command === "2") this.signout();
-      else if (command === "3") this.changPerson();
-      else this.$emit("command", command); // 抛出外部命令
-    },
-    changPwd() {
-      this.changeUid = this.$store.getters.userinfo.id;
-      this.ruleForm.pwd = "";
-      this.ruleForm.confirmPwd = "";
-      this.showChangePwd = true;
-    },
-    changPerson() {
-      this.changeUid = this.$store.getters.userinfo.id;
-      this.perInfo.nick = this.$store.getters.userinfo.nick;
-      this.perInfo.phone = this.$store.getters.userinfo.phone;
-      this.showPerInfo = true;
-    },
-    validatePhone(phone) {
-      const phoneRegex = /^1[3-9]\d{9}$/;
-      return phoneRegex.test(phone);
+      if (command === "openSysSettings") {
+        // 打开系统设置对话框，默认密码 tab
+        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); // 抛出外部命令
+      }
     },
-    cancelChangePwd() {
-      this.showChangePwd = false;
-      this.changeUid = "";
-      this.ruleForm.pwd = "";
-      this.ruleForm.confirmPwd = "";
-    },
-    cancelChangePerInfo() {
-      this.showPerInfo = false;
-      this.perInfo.nick = "";
-      this.perInfo.phone = "";
-    },
-    savePerInfo(param) {
-      if (param.phone) {
-        if (!this.validatePhone(param.phone)) {
-          this.$message.error("请输入有效的手机号");
-          return;
+    // 系统设置 - 提交修改密码
+    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);
         }
-      }
-
-      if (!param.nick && !param.phone) {
-        this.$message.error("昵称和手机号至少填写一项");
-        return;
-      }
-
-      let params = {
-        uid: this.$store.getters.userinfo.id,
-        nick: param.nick,
-        phone: param.phone,
-      };
-      this.$emit("savePerInfo", params);
+      });
     },
-    saveChangePwd(formName) {
-      this.$refs[formName].validate((valid) => {
+    // 系统设置 - 提交修改个人信息
+    submitSysPer() {
+      this.$refs.sysPerForm.validate((valid) => {
         if (valid) {
-          let params = {
-            pwd: this.ruleForm.pwd,
-            confirmPwd: this.ruleForm.confirmPwd,
-            uid: this.changeUid,
+          const payload = {
+            uid: this.$store.getters.userinfo.id,
+            nick: this.sysPerForm.nick,
+            phone: this.sysPerForm.phone,
           };
-          this.$emit("userChangePwd", params, this.changePwdAfter);
-        } else {
-          console.log("error submit!!");
-          return false;
+          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("皮肤切换成功");
+    },
+    // changPwd() {
+    //   this.changeUid = this.$store.getters.userinfo.id;
+    //   this.ruleForm.pwd = "";
+    //   this.ruleForm.confirmPwd = "";
+    //   this.showChangePwd = true;
+    // },
+    // changPerson() {
+    //   this.changeUid = this.$store.getters.userinfo.id;
+    //   this.perInfo.nick = this.$store.getters.userinfo.nick;
+    //   this.perInfo.phone = this.$store.getters.userinfo.phone;
+    //   this.showPerInfo = true;
+    // },
+    validatePhone(phone) {
+      const phoneRegex = /^1[3-9]\d{9}$/;
+      return phoneRegex.test(phone);
+    },
+    // cancelChangePwd() {
+    //   this.showChangePwd = false;
+    //   this.changeUid = "";
+    //   this.ruleForm.pwd = "";
+    //   this.ruleForm.confirmPwd = "";
+    // },
+    // cancelChangePerInfo() {
+    //   this.showPerInfo = false;
+    //   this.perInfo.nick = "";
+    //   this.perInfo.phone = "";
+    // },
+    // savePerInfo(param) {
+    //   if (param.phone) {
+    //     if (!this.validatePhone(param.phone)) {
+    //       this.$message.error("请输入有效的手机号");
+    //       return;
+    //     }
+    //   }
+
+    //   if (!param.nick && !param.phone) {
+    //     this.$message.error("昵称和手机号至少填写一项");
+    //     return;
+    //   }
+
+    //   let params = {
+    //     uid: this.$store.getters.userinfo.id,
+    //     nick: param.nick,
+    //     phone: param.phone,
+    //   };
+    //   this.$emit("savePerInfo", params);
+    // },
+    // saveChangePwd(formName) {
+    //   this.$refs[formName].validate((valid) => {
+    //     if (valid) {
+    //       let params = {
+    //         pwd: this.ruleForm.pwd,
+    //         confirmPwd: this.ruleForm.confirmPwd,
+    //         uid: this.changeUid,
+    //       };
+    //       this.$emit("userChangePwd", params, this.changePwdAfter);
+    //     } else {
+    //       console.log("error submit!!");
+    //       return false;
+    //     }
+    //   });
+    // },
     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: "/" });
@@ -731,9 +1046,91 @@ export default {
   font-size: 15px;
 
   .header {
-    background: var(--le-color-header-bg);
+    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 */
@@ -955,4 +1352,114 @@ export default {
   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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leisure-core",
-  "version": "0.6.91",
+  "version": "0.6.93",
   "description": "leisure-core是京心数据基于vue2.x开发的一套后台管理系统桌面端组件库，封装了大量实用的UI控件模板,非常方便开发者快速搭建前端应用",
   "private": false,
   "author": "北方乐逍遥(zcx7878)",

package/le-theme/common/var.scss

@@ -1,17 +0,0 @@
--------------------------- */
-$--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default;
-$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
-$--fade-linear-transition: opacity 200ms linear !default;
-$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
-$--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default;
-$--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
-
-/* Color
--------------------------- */
-/// color|1|Brand Color|0
-$--color-primary: #409EFF !default;
-/// color|1|Background Color|4
-$--color-white: #FFFFFF !default;
-/// color|1|Background Color|4
-$--color-black: #000000 !default;
-$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */