leisure-core 0.6.95 → 0.7.7

package/PROJECT_GUIDE.md

@@ -53,7 +53,7 @@ leisure-core/
 │   └── index.js                  # LeTheme 主题服务（set/register/init）
 └── le-*/                         # 各功能组件（共 36 个，见下文）
     ├── index.js                  # 组件注册入口（标准 install 模式）
-    └── src/main.vue              # 组件实现（部分含 LeHeaderMenu.vue / rmixins.js 等辅助文件）
+    └── src/main.vue              # 组件实现（部分含 LeHeaderMenu.vue / ForgotPassword.vue / rmixins.js 等辅助文件）
 ```
 
 ## 4. 架构约定
@@ -270,39 +270,39 @@ mounted() {
 
 ## 7. 组件清单总览
 
-| 组件                                       | 一句话用途                          | 关键交互模式                                                             |
-| ------------------------------------------ | ----------------------------------- | ------------------------------------------------------------------------ |
-| le-button                                  | 封装 el-button，支持权限/显示控制   | 默认 slot                                                                |
-| le-button-qr                               | 点击生成二维码并下载                | emit `qrMake`                                                            |
-| le-button-msg                              | 带 popconfirm 确认的按钮            | emit `click`                                                             |
-| le-button-attach                           | 文件上传按钮（Excel/CSV 校验）      | emit `before-upload/success/error`                                       |
-| le-dialog-container                        | 弹窗容器                            | -                                                                        |
-| le-login                                   | 登录页                              | emit `handleLodin/loginAfter/sendCaptcha`                                |
-| le-home                                    | 后台主框架                          | emit `homeInit/command/userChangePwd`                                    |
-| le-form / le-form-item                     | 表单容器（透传 el-form）            | 透传 `$attrs/$listeners`                                                 |
-| le-input / le-input-number                 | 输入框/数字输入封装                 | 透传                                                                     |
-| le-input-advanced                          | 金额/数值带单位换算输入             | emit `input`                                                             |
-| le-input-validate                          | 带格式校验的输入框                  | emit `input/blur/focus/clear`                                            |
-| le-span                                    | 文本展示                            | -                                                                        |
-| le-url                                     | 超链接展示                          | required `value`                                                         |
-| le-select / le-select-option               | 下拉封装（透传）                    | 默认 slot                                                                |
-| le-select-search                           | 远程搜索下拉                        | emit `remoteMethod`                                                      |
-| le-select-multi                            | 多级树形多选                        | emit `input/change/leaf-change/clear/visible-change`                     |
-| le-date-picker                             | 日期选择                            | -                                                                        |
-| le-date-picker-auto                        | 自动识别秒/毫秒时间戳的日期选择     | emit `input`                                                             |
-| le-table-edit                              | 可编辑表格（单元格/行编辑）         | emit `cell-save/row-save/update:data/data-change/edit-cancel`            |
-| le-list                                    | 列表页（查询/分页/增删改）          | emit `getList/delRow/handleStatus/editCurrentRow/detailCurrentRow/close` |
-| le-list-form                               | 列表配套表单弹窗                    | emit `form-ready/saveData/closeDialog`                                   |
-| le-report                                  | 报表（vxe-table + 复杂表头 + 导出） | -                                                                        |
-| le-upload-table                            | 附件管理                            | 通过 props 注入 5 个 API                                                 |
-| le-media / le-media-upload / le-media-list | 素材库三件套                        | 通过 props 注入 API                                                      |
-| le-image                                   | 图片展示（http→https）              | -                                                                        |
-| le-video                                   | 视频展示                            | -                                                                        |
-| le-upload                                  | 通用上传                            | -                                                                        |
-| le-area                                    | 地区级联选择                        | emit `areaChange`                                                        |
-| le-menu                                    | 角色菜单配置                        | emit `close`                                                             |
-| le-role                                    | 角色管理（含子组件 LeRoleSub）      | -                                                                        |
-| le-role-user                               | 角色用户管理（含 LeRoleUserSub）    | -                                                                        |
+| 组件                                       | 一句话用途                                | 关键交互模式                                                                                  |
+| ------------------------------------------ | ----------------------------------------- | --------------------------------------------------------------------------------------------- |
+| le-button                                  | 封装 el-button，支持权限/显示控制         | 默认 slot                                                                                     |
+| le-button-qr                               | 点击生成二维码并下载                      | emit `qrMake`                                                                                 |
+| le-button-msg                              | 带 popconfirm 确认的按钮                  | emit `click`                                                                                  |
+| le-button-attach                           | 文件上传按钮（Excel/CSV 校验）            | emit `before-upload/success/error`                                                            |
+| le-dialog-container                        | 弹窗容器                                  | -                                                                                             |
+| le-login                                   | 登录页（含忘记密码弹窗）                  | emit `handleLodin/loginAfter/sendCaptcha/sendForgotCaptcha/verifyForgotCaptcha/resetPassword` |
+| le-home                                    | 后台主框架（含 header 菜单/系统设置弹窗） | emit `homeInit/command/userChangePwd/savePerInfo`                                             |
+| le-form / le-form-item                     | 表单容器（透传 el-form）                  | 透传 `$attrs/$listeners`                                                                      |
+| le-input / le-input-number                 | 输入框/数字输入封装                       | 透传                                                                                          |
+| le-input-advanced                          | 金额/数值带单位换算输入                   | emit `input`                                                                                  |
+| le-input-validate                          | 带格式校验的输入框                        | emit `input/blur/focus/clear`                                                                 |
+| le-span                                    | 文本展示                                  | -                                                                                             |
+| le-url                                     | 超链接展示                                | required `value`                                                                              |
+| le-select / le-select-option               | 下拉封装（透传）                          | 默认 slot                                                                                     |
+| le-select-search                           | 远程搜索下拉                              | emit `remoteMethod`                                                                           |
+| le-select-multi                            | 多级树形多选                              | emit `input/change/leaf-change/clear/visible-change`                                          |
+| le-date-picker                             | 日期选择                                  | -                                                                                             |
+| le-date-picker-auto                        | 自动识别秒/毫秒时间戳的日期选择           | emit `input`                                                                                  |
+| le-table-edit                              | 可编辑表格（单元格/行编辑）               | emit `cell-save/row-save/update:data/data-change/edit-cancel`                                 |
+| le-list                                    | 列表页（查询/分页/增删改）                | emit `getList/delRow/handleStatus/editCurrentRow/detailCurrentRow/close`                      |
+| le-list-form                               | 列表配套表单弹窗                          | emit `form-ready/saveData/closeDialog`                                                        |
+| le-report                                  | 报表（vxe-table + 复杂表头 + 导出）       | -                                                                                             |
+| le-upload-table                            | 附件管理                                  | 通过 props 注入 5 个 API                                                                      |
+| le-media / le-media-upload / le-media-list | 素材库三件套                              | 通过 props 注入 API                                                                           |
+| le-image                                   | 图片展示（http→https）                    | -                                                                                             |
+| le-video                                   | 视频展示                                  | -                                                                                             |
+| le-upload                                  | 通用上传                                  | -                                                                                             |
+| le-area                                    | 地区级联选择                              | emit `areaChange`                                                                             |
+| le-menu                                    | 角色菜单配置                              | emit `close`                                                                                  |
+| le-role                                    | 角色管理（含子组件 LeRoleSub）            | -                                                                                             |
+| le-role-user                               | 角色用户管理（含 LeRoleUserSub）          | -                                                                                             |
 
 ## 8. 组件 API 详解
 
@@ -439,21 +439,30 @@ mounted() {
 
 ### 8.20 le-login
 
-- **Props**：`home`、`title`、`title1`、`captchaRequired`
+- **Props**：`home`、`title`、`title1`、`captchaRequired`、`showForgotPassword`（是否开启忘记密码功能，默认 `true`）、`emailForgotEnabled`（是否开启邮箱找回方式，默认 `true`）
 - **Events**：
   - `handleLodin(...)`：账号、密码、验证码、成功/失败回调
   - `loginAfter(data)`：登录成功后通知
   - `sendCaptcha(...)`：触发发送验证码，含成功/失败回调
-- **行为**：登录成功后保存用户信息到 store、设置 token、成功提示
-- **样式**：全部通过 CSS 变量消费（login-card 背景 / logo 圆形 / 输入框边框文字 / 登录按钮渐变 / 验证码表头 / 装饰线），跟随 LeTheme 一键换肤
+  - `sendForgotCaptcha({ account, type, success, fail })`：忘记密码 - 发送验证码，`type` 为 `phone`/`email`
+  - `verifyForgotCaptcha({ account, captcha, type, success, fail })`：忘记密码 - 验证验证码
+  - `resetPassword({ account, captcha, newPwd, type, success, fail })`：忘记密码 - 重置密码
+- **子组件**：`ForgotPassword`（`src/ForgotPassword.vue`，独立的忘记密码弹窗组件，自包含三步流程逻辑）
+- **行为**：登录成功后保存用户信息到 store、设置 token、成功提示；忘记密码完成后自动回填账号到登录表单
+- **忘记密码流程**（ForgotPassword 组件）：
+  - 三步流程：验证身份 → 设置新密码 → 完成
+  - 支持手机/邮箱两种找回方式切换（`emailEnabled` 控制）
+  - 自定义紧凑进度条（圆形数字标记 + 短标签 + 连接线，不换行）
+  - v-model 控制弹窗显示，事件透传给宿主
+- **样式**：全部通过 CSS 变量消费（login-card 背景 / logo 圆形 / 输入框边框文字 / 登录按钮渐变 / 验证码表头 / 装饰线 / 忘记密码弹窗），跟随 LeTheme 一键换肤
 
 ### 8.21 le-home
 
 - **Props**：`extraDropdownItems`、`companyInfo`、`showClose`、`headerMenu`、`showHeaderMenu`
 - **Slots**：`otherContainer`、`rightComment`
-- **Events**：`homeInit`、`command(command)`（修改密码/退出之外的命令）、`userChangePwd(params, callback)`
+- **Events**：`homeInit`、`command(command)`（修改密码/退出之外的命令）、`userChangePwd(params, callback)`、`savePerInfo(params)`
 - **子组件**：`LeHeaderMenu`（`src/LeHeaderMenu.vue`，递归菜单组件，支持任意深度嵌套）
-- **行为**：挂载后注册键盘/鼠标事件，内置修改密码弹窗
+- **行为**：挂载后注册键盘/鼠标事件，内置修改密码弹窗、系统设置弹窗
 - **Header 布局**：
   - 三栏结构：左（品牌名）/ 中（横向菜单，可选）/ 右（用户下拉）
   - 有 headerMenu 时 span 为 `4:12:8`，无时为 `8:0:16`
@@ -463,12 +472,22 @@ mounted() {
   - `_filterHiddenMenus(list)`：递归过滤 `ishide === 1` 的菜单项
   - `handleHeaderMenuSelect(item)`：复用侧边栏导航逻辑
   - `getCssVar(name, fallback)`：读 CSS 变量的 helper（定义在 methods 里）
-- **关键 computed**：`effectiveHeaderMenu`、`headerMenuBgColor`、`headerMenuTextColor`、`headerMenuActiveTextColor`
+  - `submitSysPwd()`：提交修改密码表单，emit `userChangePwd`
+  - `submitSysPer()`：提交修改个人信息表单，emit `savePerInfo`
+  - `selectSkin(skinName)`：一键切换皮肤
+- **关键 computed**：`effectiveHeaderMenu`、`headerMenuBgColor`、`headerMenuTextColor`、`headerMenuActiveTextColor`、`asideStyle`、`menuBackgroundColor`、`menuTextColor`、`menuActiveTextColor`、`availableSkins`、`currentSkin`
+- **系统设置弹窗**：
+  - 用户下拉菜单中"系统设置"项触发，el-dialog + el-tabs 实现
+  - 三个 Tab：修改密码 / 修改个人信息 / 设置皮肤
+  - 修改密码：原密码 / 新密码 / 确认密码，含校验
+  - 修改个人信息：昵称 / 手机号，含校验
+  - 设置皮肤：皮肤卡片列表（默认蓝 / 深色 / 翠绿），点击即切换，当前项高亮
+  - footer 按钮根据当前 tab 动态显示
 - **样式换肤支持**：
   - 顶部 header 背景 / aside 背景 / 拖动条 / aside_open_close / contextmenu 全部使用 `var(--le-color-*)`
   - 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
+  - 监听 `window` 级 `le-theme-change` 事件，回调里更新 `currentSkin` 触发依赖 CSS 变量的 computed 重算
 
 ### 8.22 le-area
 
@@ -560,7 +579,8 @@ mounted() {
 9. **CSS 变量 + 服务层的换肤架构**：变量层（`vars.css`）只管语义与 Element UI 覆盖；服务层（`LeTheme`）管运行时切换/持久化/事件派发；消费层按"CSS 直接 var"与"prop 绑定 + 事件监听"两种模式消费，解耦且可扩展
 10. **避免 window 污染**：`LeTheme` 单例挂到 Vue 原型而非 `window`，符合组件库"库不污染全局"的规范
 11. **新增皮肤 checklist**：品牌色族 → 功能色 → 文本边框容器 → framework 全部变量，缺一不可，否则局部不跟随换肤
-12. **el-menu 等 prop 驱动组件的换肤坑**：不能只改外层 CSS，必须把 prop（`background-color` 等）绑定到 computed，再用 `getCssVar` 读 CSS 变量，监听 `le-theme-change` 后 `$forceUpdate` 强制刷新
+12. **el-menu 等 prop 驱动组件的换肤坑**：不能只改外层 CSS，必须把 prop（`background-color` 等）绑定到 computed，再用 `getCssVar` 读 CSS 变量；监听 `le-theme-change` 后更新 `currentSkin` 响应式变量，computed 里用 `return this.currentSkin, this.getCssVar(...)` 逗号表达式建立响应式依赖，避免 `$forceUpdate` 和 `:key` 重建闪烁
+13. **弹窗组件化 + v-model 模式**：`ForgotPassword` 独立成子组件，通过 `v-model`（`value` prop + `input` event）控制显隐，内部自包含多步流程状态（step/form/计时器），父组件只需透传业务事件（`sendCaptcha`/`verifyCaptcha`/`resetPassword`），职责清晰且可独立复用
 
 ## 12. 版本与发布
 

package/le-home/src/main.vue

@@ -138,71 +138,6 @@
         </div>
       </el-main>
     </el-container>
-    <!-- <el-dialog
-      title="修改密码"
-      ref="elDialog"
-      :visible.sync="showChangePwd"
-      width="30%"
-      :close-on-click-modal="false"
-      @close="cancelChangePwd"
-      :show-close="showClose"
-      custom-class="rounded-dialog"
-      center
-    >
-      <el-form
-        :model="ruleForm"
-        status-icon
-        :rules="rules"
-        ref="ruleForm"
-        label-width="100px"
-        class="demo-ruleForm"
-      >
-        <el-form-item label="新密码" prop="pwd">
-          <el-input
-            type="password"
-            v-model="ruleForm.pwd"
-            placeholder="请输入新密码"
-            autocomplete="off"
-          ></el-input>
-        </el-form-item>
-        <el-form-item label="确认密码" prop="confirmPwd">
-          <el-input
-            type="password"
-            v-model="ruleForm.confirmPwd"
-            placeholder="请输入确认密码"
-            autocomplete="off"
-          ></el-input>
-        </el-form-item>
-      </el-form>
-      <div
-        ref="pwdref"
-        style="display: flex; justify-content: center; color: red"
-      >
-        {{ pwdinfo }}
-      </div>
-      <div slot="footer">
-        <el-button
-          type="info"
-          v-if="showClose"
-          @click="cancelChangePwd('ruleForm')"
-          >取 消</el-button
-        >
-        <el-button type="primary" @click="saveChangePwd('ruleForm')"
-          >确认修改</el-button
-        >
-      </div>
-    </el-dialog> -->
-    <!-- <le-dialog-container :showDialog="showPerInfo" title="个人信息" width="30%">
-      <le-list-form
-        :formColumns="formColumns"
-        :formData="perInfo"
-        :columnsPerRow="1"
-        :handleStatus="2"
-        @closeDialog="cancelChangePerInfo"
-        @saveData="savePerInfo"
-      ></le-list-form>
-    </le-dialog-container> -->
-
     <!-- 系统设置对话框 -->
     <el-dialog
       :visible.sync="sysSettingsVisible"
@@ -222,14 +157,6 @@
             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"
@@ -313,7 +240,6 @@
         </template>
       </div>
     </el-dialog>
-
     <div v-show="contextMenuVisible">
       <ul
         :style="{ left: menuLeft + 'px', top: menuTop + 'px' }"
@@ -417,22 +343,6 @@ export default {
       // 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" }],
-      // },
       //右键菜单
       contextMenuVisible: false,
       menuLeft: 0,
@@ -588,18 +498,6 @@ export default {
       }
       return item;
     });
-
-    //代码2
-    // this.menuData = this.$store.getters.menu;
-    // this.menuData = this.$store.getters.menu.filter(function (item) {
-    //   if (item.children) {
-    //     item.children = item.children.filter(function (item1) {
-    //       return item1.ishide === 0;
-    //     });
-    //   }
-    //   return item;
-    // });
-
     this.$emit("homeInit");
     document.addEventListener("keydown", this.handleKeyDown);
 
@@ -720,7 +618,6 @@ export default {
     },
     handleCommand(command) {
       if (command === "openSysSettings") {
-        // 打开系统设置对话框，默认密码 tab
         this.sysSettingsTab = "pwd";
         this.sysPwdForm = { oldPwd: "", newPwd: "", confirmPwd: "" };
         this.sysPerForm = {
@@ -734,6 +631,15 @@ export default {
         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) => {
@@ -776,68 +682,11 @@ export default {
       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("更新成功");

package/le-login/src/ForgotPassword.vue

@@ -0,0 +1,613 @@
+<template>
+  <el-dialog
+    title="找回密码"
+    :visible.sync="dialogVisible"
+    width="480px"
+    :close-on-click-modal="false"
+    custom-class="forgot-dialog"
+    append-to-body
+    @closed="resetForm"
+  >
+    <!-- 自定义紧凑步骤条 -->
+    <div class="forgot-progress">
+      <div
+        v-for="(s, i) in steps"
+        :key="i"
+        class="progress-item"
+        :class="{
+          active: step >= i,
+          done: step > i,
+        }"
+      >
+        <div class="progress-circle">
+          <i v-if="step > i" class="el-icon-check"></i>
+          <span v-else>{{ i + 1 }}</span>
+        </div>
+        <span class="progress-label">{{ s }}</span>
+        <div class="progress-line" v-if="i < steps.length - 1"></div>
+      </div>
+    </div>
+
+    <el-form
+      ref="forgotForm"
+      :model="form"
+      :rules="rules"
+      label-width="0"
+      class="forgot-form"
+      v-if="step < 2"
+    >
+      <!-- 步骤1:验证身份 -->
+      <div v-if="step === 0">
+        <!-- 找回方式切换:手机/邮箱 -->
+        <div class="forgot-tabs" v-if="emailEnabled">
+          <span
+            class="forgot-tab"
+            :class="{ active: type === 'phone' }"
+            @click="switchType('phone')"
+            >手机找回</span
+          >
+          <span
+            class="forgot-tab"
+            :class="{ active: type === 'email' }"
+            @click="switchType('email')"
+            >邮箱找回</span
+          >
+        </div>
+
+        <el-form-item prop="account">
+          <el-input
+            v-model="form.account"
+            :placeholder="
+              type === 'phone' ? '请输入手机号' : '请输入邮箱'
+            "
+            :prefix-icon="
+              type === 'phone' ? 'el-icon-mobile-phone' : 'el-icon-message'
+            "
+            class="forgot-input"
+          />
+        </el-form-item>
+        <el-form-item prop="captcha">
+          <div class="forgot-captcha-wrapper">
+            <el-input
+              v-model="form.captcha"
+              placeholder="请输入6位验证码"
+              prefix-icon="el-icon-key"
+              maxlength="6"
+              class="forgot-captcha-input"
+            ></el-input>
+            <el-button
+              class="forgot-captcha-btn"
+              type="primary"
+              :disabled="isDis || isCounting"
+              :loading="sending"
+              @click="sendCaptcha"
+            >
+              {{ isCounting ? `${retime}秒` : "获取验证码" }}
+            </el-button>
+          </div>
+        </el-form-item>
+      </div>
+
+      <!-- 步骤2:设置新密码 -->
+      <div v-if="step === 1">
+        <el-form-item prop="newPwd">
+          <el-input
+            v-model="form.newPwd"
+            type="password"
+            placeholder="请输入新密码(6-20位)"
+            show-password
+            prefix-icon="el-icon-lock"
+            class="forgot-input"
+          />
+        </el-form-item>
+        <el-form-item prop="confirmPwd">
+          <el-input
+            v-model="form.confirmPwd"
+            type="password"
+            placeholder="请确认新密码"
+            show-password
+            prefix-icon="el-icon-lock"
+            class="forgot-input"
+            @keydown.enter.native="submit"
+          />
+        </el-form-item>
+      </div>
+    </el-form>
+
+    <!-- 步骤3:完成 -->
+    <div v-if="step === 2" class="forgot-success">
+      <i class="el-icon-success"></i>
+      <p>密码修改成功!</p>
+      <span>请使用新密码登录系统</span>
+    </div>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">
+        {{ step === 2 ? "关闭" : "取消" }}
+      </el-button>
+      <el-button
+        v-if="step === 0"
+        type="primary"
+        :loading="submitting"
+        @click="nextStep"
+        >下一步</el-button
+      >
+      <el-button
+        v-if="step === 1"
+        type="primary"
+        :loading="submitting"
+        @click="submit"
+        >确认修改</el-button
+      >
+      <el-button v-if="step === 2" type="primary" @click="finish"
+        >去登录</el-button
+      >
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "ForgotPassword",
+  props: {
+    // 是否显示弹窗(v-model 绑定)
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否开启邮箱找回方式
+    emailEnabled: {
+      type: Boolean,
+      default: true,
+    },
+    // 默认找回方式
+    defaultType: {
+      type: String,
+      default: "phone",
+      validator: (v) => v === "phone" || v === "email",
+    },
+  },
+  data() {
+    return {
+      step: 0, // 0:验证身份 1:设置新密码 2:完成
+      steps: ["验证", "重置", "完成"], // 紧凑步骤标签
+      type: this.defaultType, // 找回方式:phone/email
+      submitting: false,
+      sending: false,
+      isCounting: false,
+      isDis: false,
+      retime: 60,
+      countdownTimer: null,
+      form: {
+        account: "",
+        captcha: "",
+        newPwd: "",
+        confirmPwd: "",
+      },
+      rules: {
+        account: [
+          { required: true, message: "请输入账号", trigger: "blur" },
+          {
+            validator: (rule, value, callback) => {
+              if (!value) return callback();
+              if (this.type === "phone") {
+                if (!/^1[3-9]\d{9}$/.test(value)) {
+                  callback(new Error("请输入正确的手机号"));
+                } else {
+                  callback();
+                }
+              } else {
+                if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+                  callback(new Error("请输入正确的邮箱"));
+                } else {
+                  callback();
+                }
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+        captcha: [
+          { required: true, message: "请输入验证码", trigger: "blur" },
+          { len: 6, message: "验证码长度为6位", trigger: "blur" },
+          {
+            pattern: /^\d{6}$/,
+            message: "验证码必须是6位数字",
+            trigger: "blur",
+          },
+        ],
+        newPwd: [
+          { required: true, message: "请输入新密码", trigger: "blur" },
+          {
+            min: 6,
+            max: 20,
+            message: "长度在 6 到 20 个字符",
+            trigger: "blur",
+          },
+        ],
+        confirmPwd: [
+          { required: true, message: "请确认新密码", trigger: "blur" },
+          {
+            validator: (rule, value, callback) => {
+              if (value !== this.form.newPwd) {
+                callback(new Error("两次输入的密码不一致"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        this.$emit("input", val);
+      },
+    },
+  },
+  watch: {
+    value(val) {
+      if (val) {
+        // 打开时重置到第一步
+        this.step = 0;
+        this.type = this.defaultType;
+      }
+    },
+  },
+  beforeDestroy() {
+    if (this.countdownTimer) {
+      clearInterval(this.countdownTimer);
+    }
+  },
+  methods: {
+    // 切换找回方式
+    switchType(t) {
+      if (this.type === t) return;
+      this.type = t;
+      this.form.account = "";
+      this.form.captcha = "";
+      if (this.$refs.forgotForm) {
+        this.$refs.forgotForm.clearValidate(["account", "captcha"]);
+      }
+    },
+
+    // 重置表单
+    resetForm() {
+      this.step = 0;
+      this.type = this.defaultType;
+      this.form = {
+        account: "",
+        captcha: "",
+        newPwd: "",
+        confirmPwd: "",
+      };
+      this.submitting = false;
+      this.sending = false;
+      if (this.$refs.forgotForm) {
+        this.$refs.forgotForm.resetFields();
+      }
+      this.$emit("closed");
+    },
+
+    // 发送验证码
+    sendCaptcha() {
+      if (!this.form.account) {
+        this.$message.error(
+          this.type === "phone" ? "请输入手机号" : "请输入邮箱"
+        );
+        return false;
+      }
+
+      // 先校验账号格式
+      const isPhone = this.type === "phone";
+      const valid = isPhone
+        ? /^1[3-9]\d{9}$/.test(this.form.account)
+        : /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.form.account);
+      if (!valid) {
+        this.$message.error(isPhone ? "请输入正确的手机号" : "请输入正确的邮箱");
+        return false;
+      }
+
+      this.sending = true;
+
+      // emit 给父组件,由父组件调用发送验证码接口
+      this.$emit("sendCaptcha", {
+        account: this.form.account,
+        type: this.type,
+        success: this.startCountdown,
+        fail: () => {
+          this.sending = false;
+        },
+      });
+    },
+
+    // 倒计时
+    startCountdown() {
+      this.sending = false;
+      this.isCounting = true;
+      this.isDis = true;
+      this.retime = 60;
+
+      this.countdownTimer = setInterval(() => {
+        this.retime--;
+        if (this.retime <= 0) {
+          clearInterval(this.countdownTimer);
+          this.isCounting = false;
+          this.isDis = false;
+          this.retime = 60;
+        }
+      }, 1000);
+    },
+
+    // 下一步:验证身份
+    nextStep() {
+      this.$refs.forgotForm.validateField(["account", "captcha"], (errors) => {
+        if (!errors) {
+          this.submitting = true;
+          // emit 给父组件验证验证码,成功后进入下一步
+          this.$emit("verifyCaptcha", {
+            account: this.form.account,
+            captcha: this.form.captcha,
+            type: this.type,
+            success: () => {
+              this.submitting = false;
+              this.step = 1;
+              this.$nextTick(() => {
+                if (this.$refs.forgotForm) {
+                  this.$refs.forgotForm.clearValidate();
+                }
+              });
+            },
+            fail: (msg) => {
+              this.submitting = false;
+              this.$message.error(msg || "验证失败");
+            },
+          });
+        }
+      });
+    },
+
+    // 确认修改密码
+    submit() {
+      this.$refs.forgotForm.validateField(["newPwd", "confirmPwd"], (errors) => {
+        if (!errors) {
+          this.submitting = true;
+          // emit 给父组件调用重置密码接口
+          this.$emit("resetPassword", {
+            account: this.form.account,
+            captcha: this.form.captcha,
+            newPwd: this.form.newPwd,
+            type: this.type,
+            success: () => {
+              this.submitting = false;
+              this.step = 2;
+            },
+            fail: (msg) => {
+              this.submitting = false;
+              this.$message.error(msg || "修改失败");
+            },
+          });
+        }
+      });
+    },
+
+    // 完成去登录
+    finish() {
+      this.dialogVisible = false;
+      // 把账号回填给父组件,方便用户直接登录
+      this.$emit("finish", {
+        account: this.form.account,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.forgot-dialog {
+  border-radius: 16px;
+  overflow: hidden;
+
+  .el-dialog__header {
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--le-color-border-light);
+
+    .el-dialog__title {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--le-color-text-strong);
+    }
+  }
+
+  .el-dialog__body {
+    padding: 24px;
+  }
+
+  .el-dialog__footer {
+    padding: 16px 24px 20px;
+    border-top: 1px solid var(--le-color-border-light);
+  }
+
+  /* 自定义紧凑步骤条 */
+  .forgot-progress {
+    display: flex;
+    align-items: center;
+    margin-bottom: 28px;
+    padding: 0 8px;
+
+    .progress-item {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      position: relative;
+
+      &:last-child {
+        flex: 0;
+      }
+
+      .progress-circle {
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 13px;
+        font-weight: 600;
+        flex-shrink: 0;
+        background: var(--le-color-fill);
+        color: var(--le-color-text-muted);
+        border: 2px solid var(--le-color-border);
+        transition: all 0.25s ease;
+      }
+
+      .progress-label {
+        margin-left: 8px;
+        font-size: 13px;
+        color: var(--le-color-text-muted);
+        white-space: nowrap;
+        transition: color 0.25s ease;
+      }
+
+      .progress-line {
+        flex: 1;
+        height: 2px;
+        background: var(--le-color-border);
+        margin: 0 10px;
+        min-width: 20px;
+        transition: background 0.25s ease;
+      }
+
+      /* 当前/已完成状态 */
+      &.active {
+        .progress-circle {
+          background: var(--le-color-primary);
+          border-color: var(--le-color-primary);
+          color: #fff;
+          box-shadow: 0 4px 12px var(--le-color-primary-shadow-soft);
+        }
+        .progress-label {
+          color: var(--le-color-text-strong);
+          font-weight: 600;
+        }
+      }
+
+      &.done {
+        .progress-circle {
+          background: var(--le-color-success);
+          border-color: var(--le-color-success);
+          color: #fff;
+        }
+        .progress-line {
+          background: var(--le-color-success);
+        }
+        .progress-label {
+          color: var(--le-color-text-regular);
+        }
+      }
+    }
+  }
+
+  /* 找回方式切换 tabs */
+  .forgot-tabs {
+    display: flex;
+    margin-bottom: 18px;
+    background: var(--le-color-fill-light);
+    border-radius: 8px;
+    padding: 4px;
+
+    .forgot-tab {
+      flex: 1;
+      text-align: center;
+      padding: 8px 0;
+      font-size: 13px;
+      color: var(--le-color-text-regular);
+      cursor: pointer;
+      border-radius: 6px;
+      transition: all 0.2s ease;
+      user-select: none;
+
+      &:hover {
+        color: var(--le-color-text-strong);
+      }
+
+      &.active {
+        background: var(--le-color-card-bg);
+        color: var(--le-color-primary);
+        font-weight: 600;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+      }
+    }
+  }
+
+  .forgot-form {
+    .el-form-item {
+      margin-bottom: 20px;
+    }
+
+    .forgot-captcha-wrapper {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+    }
+
+    .forgot-captcha-input {
+      flex: 1;
+    }
+
+    .forgot-captcha-btn {
+      min-width: 110px;
+      height: 44px;
+      border-radius: 8px;
+      flex-shrink: 0;
+    }
+  }
+
+  .forgot-input .el-input__inner,
+  .forgot-captcha-input .el-input__inner {
+    height: 44px;
+    border-radius: 8px;
+    font-size: 14px;
+  }
+
+  .forgot-success {
+    text-align: center;
+    padding: 20px 0 10px;
+
+    i {
+      font-size: 64px;
+      color: var(--le-color-success);
+      margin-bottom: 16px;
+    }
+
+    p {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--le-color-text-strong);
+      margin: 0 0 8px 0;
+    }
+
+    span {
+      font-size: 13px;
+      color: var(--le-color-text-regular);
+    }
+  }
+
+  .dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+
+    .el-button {
+      min-width: 90px;
+      border-radius: 8px;
+    }
+  }
+}
+</style>

package/le-login/src/main.vue

@@ -108,18 +108,36 @@
                   <span v-else>登录中...</span>
                 </el-button>
               </el-form-item>
+
+              <!-- 忘记密码链接 -->
+              <div class="forgot-link" v-if="showForgotPassword">
+                <a href="javascript:;" @click="openForgotDialog">忘记密码?</a>
+              </div>
             </el-form>
           </div>
         </div>
       </div>
     </div>
+
+    <!-- 忘记密码弹窗(独立组件) -->
+    <ForgotPassword
+      v-if="showForgotPassword"
+      v-model="forgotVisible"
+      :email-enabled="emailForgotEnabled"
+      @sendCaptcha="$emit('sendForgotCaptcha', $event)"
+      @verifyCaptcha="$emit('verifyForgotCaptcha', $event)"
+      @resetPassword="$emit('resetPassword', $event)"
+      @finish="onForgotFinish"
+    />
   </div>
 </template>
 
 <script>
 import { setToken } from "../../le-libs/js/tokens";
+import ForgotPassword from "./ForgotPassword.vue";
 export default {
   name: "le-login",
+  components: { ForgotPassword },
   props: {
     home: {
       type: String,
@@ -138,6 +156,16 @@ export default {
       type: Boolean,
       default: true,
     },
+    // 是否开启忘记密码功能
+    showForgotPassword: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否开启邮箱找回密码方式
+    emailForgotEnabled: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -184,6 +212,8 @@ export default {
       retime: 60, // 倒计时时间
       isDis: false, // 按钮是否禁用
       countdownTimer: null, // 倒计时定时器
+      // 忘记密码弹窗显示状态(由 ForgotPassword 子组件管理其余状态)
+      forgotVisible: false,
     };
   },
   mounted() {
@@ -310,6 +340,20 @@ export default {
         }
       }, 1000);
     },
+
+    // ============ 忘记密码功能 ============
+
+    // 打开忘记密码弹窗
+    openForgotDialog() {
+      this.forgotVisible = true;
+    },
+
+    // 忘记密码完成回调:回填账号到登录表单
+    onForgotFinish({ account }) {
+      if (account) {
+        this.formdata.account = account;
+      }
+    },
   },
 };
 </script>
@@ -731,6 +775,23 @@ export default {
   margin-top: 10px;
 }
 
+.forgot-link {
+  text-align: right;
+  margin-top: -10px;
+  padding: 0 2px;
+
+  a {
+    font-size: 13px;
+    color: var(--le-color-text-regular);
+    text-decoration: none;
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: var(--le-color-primary);
+    }
+  }
+}
+
 .login-btn {
   width: 100%;
   height: 52px;

package/package.json

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