leisure-core 1.0.2 → 1.0.3

package/le-login/src/main.vue

@@ -0,0 +1,982 @@
+<template>
+  <div class="login-wrapper">
+    <div class="login-card">
+      <!-- 左右布局容器 -->
+      <div class="login-layout">
+        <!-- 左侧Logo区域 -->
+        <div class="left-section">
+          <div class="logo-content">
+            <div class="logo-circle">
+              <i class="el-icon-s-data"></i>
+            </div>
+            <div class="system-info">
+              <h2>{{ title }}</h2>
+              <p class="subtitle">{{ title1 }}</p>
+            </div>
+
+            <!-- 浏览器提示移到Logo区域 -->
+            <div class="system-tips">
+              <p class="tip">
+                <i class="el-icon-warning-outline"></i>
+                建议使用Chrome、Edge等现代浏览器
+              </p>
+            </div>
+
+            <!-- 左侧装饰元素 -->
+            <div class="decorative-line"></div>
+          </div>
+        </div>
+
+        <!-- 右侧表单区域 -->
+        <div class="right-section">
+          <!-- 表单容器 -->
+          <div class="form-container">
+            <div class="form-header">
+              <h3>用户登录</h3>
+              <p>请输入您的账号信息</p>
+            </div>
+
+            <el-form
+              ref="loginForm"
+              :model="formdata"
+              :rules="rules"
+              class="login-form"
+              @submit.native.prevent="handleLodin"
+            >
+              <!-- 用户名 -->
+              <el-form-item label="用户名" prop="account" class="form-item">
+                <el-input
+                  v-model="formdata.account"
+                  placeholder="请输入用户名"
+                  prefix-icon="el-icon-user"
+                  class="custom-input"
+                  @keydown.enter.native="nextFocus(0)"
+                />
+              </el-form-item>
+
+              <!-- 密码 -->
+              <el-form-item label="密码" prop="pwd" class="form-item">
+                <el-input
+                  v-model="formdata.pwd"
+                  type="password"
+                  placeholder="请输入密码"
+                  show-password
+                  prefix-icon="el-icon-lock"
+                  class="custom-input"
+                  @keydown.enter.native="nextFocus(1)"
+                />
+              </el-form-item>
+
+              <!-- 验证码区域（移除label） -->
+              <el-form-item
+                prop="captcha"
+                class="captcha-item"
+                v-if="captchaRequired"
+              >
+                <div class="captcha-wrapper">
+                  <el-input
+                    v-model="formdata.captcha"
+                    placeholder="请输入6位验证码"
+                    class="captcha-input"
+                    prefix-icon="el-icon-message"
+                    maxlength="6"
+                    @keydown.enter.native="handleLodin"
+                  ></el-input>
+                  <el-button
+                    class="captcha-button"
+                    type="primary"
+                    :disabled="isDis || isCounting"
+                    @click="sendCaptcha"
+                    :loading="sending"
+                  >
+                    <span class="button-text">
+                      {{ isCounting ? `${retime}秒` : "获取验证码" }}
+                    </span>
+                  </el-button>
+                </div>
+              </el-form-item>
+
+              <!-- 登录按钮 -->
+              <el-form-item class="login-btn-item">
+                <el-button
+                  type="primary"
+                  class="login-btn"
+                  :loading="loading"
+                  @click="handleLodin"
+                >
+                  <span v-if="!loading">登录系统</span>
+                  <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,
+      default: "/home",
+    },
+    title: {
+      type: String,
+      default: "张裕酒文化博物馆管理系统",
+    },
+    title1: {
+      type: String,
+      default: "Wine Culture Museum Management System",
+    },
+    // 添加验证码相关props
+    captchaRequired: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否开启忘记密码功能
+    showForgotPassword: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否开启邮箱找回密码方式
+    emailForgotEnabled: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      formdata: {
+        account: "",
+        pwd: "",
+        captcha: "",
+      },
+      rules: {
+        account: [
+          { required: true, message: "请输入用户名", trigger: "blur" },
+          {
+            min: 2,
+            max: 20,
+            message: "长度在 2 到 20 个字符",
+            trigger: "blur",
+          },
+        ],
+        pwd: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+          {
+            min: 6,
+            max: 20,
+            message: "长度在 6 到 20 个字符",
+            trigger: "blur",
+          },
+        ],
+        captcha: this.captchaRequired
+          ? [
+              { required: true, message: "请输入验证码", trigger: "blur" },
+              { len: 6, message: "验证码长度为6位", trigger: "blur" },
+              {
+                pattern: /^\d{6}$/,
+                message: "验证码必须是6位数字",
+                trigger: "blur",
+              },
+            ]
+          : [],
+      },
+      loading: false,
+      // 验证码相关数据
+      sending: false, // 发送中状态
+      isCounting: false, // 是否正在倒计时
+      retime: 60, // 倒计时时间
+      isDis: false, // 按钮是否禁用
+      countdownTimer: null, // 倒计时定时器
+      // 忘记密码弹窗显示状态(由 ForgotPassword 子组件管理其余状态)
+      forgotVisible: false,
+    };
+  },
+  mounted() {
+    // 自动聚焦用户名输入框
+    this.$nextTick(() => {
+      const firstInput = this.$el.querySelector(".custom-input input");
+      if (firstInput) {
+        firstInput.focus();
+      }
+    });
+
+    // 组件销毁前清除定时器
+    this.$once("hook:beforeDestroy", () => {
+      if (this.countdownTimer) {
+        clearInterval(this.countdownTimer);
+      }
+    });
+  },
+  methods: {
+    nextFocus(index) {
+      const inputs = this.$el.querySelectorAll(".custom-input input");
+      if (inputs.length > index + 1) {
+        inputs[index + 1].focus();
+      }
+    },
+
+    handleLodin() {
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          this.$emit(
+            "handleLodin",
+            {
+              account: this.formdata.account,
+              pwd: this.formdata.pwd,
+              captcha: this.captchaRequired ? this.formdata.captcha : undefined,
+            },
+            this.loginAfter,
+            this.nav2Home,
+            (fail) => {
+              this.loading = false;
+              this.$message.error(fail || "登录失败");
+            },
+          );
+        }
+      });
+    },
+
+    loginAfter(res) {
+      this.loading = false;
+      const code = res?.data?.code || "";
+      if (code === "10000") {
+        const data = res.data.data;
+        if (data && data.cid && data.cid.length > 0) {
+          this.$store.commit("setCid", data.cid);
+        }
+        this.$store.commit("setUserInfo", data);
+        this.$emit("loginAfter", data);
+        setToken(res.data.data.token);
+        this.$message.success("登录成功");
+      }
+    },
+
+    nav2Home() {
+      this.$router.push({ path: this.home });
+    },
+
+    closeLoading() {
+      this.loading = false;
+    },
+
+    getUserInfo() {
+      return this.formdata;
+    },
+
+    validatePhone(phone) {
+      const phoneRegex = /^1[3-9]\d{9}$/;
+      return phoneRegex.test(phone);
+    },
+
+    // 发送验证码
+    sendCaptcha() {
+      if (
+        !this.formdata.account ||
+        !this.validatePhone(this.formdata.account)
+      ) {
+        this.$message.error("请输入正确的手机号码");
+        return false;
+      }
+
+      // 验证密码
+      if (!this.formdata.pwd) {
+        this.$message.error("请输入密码");
+        return false;
+      }
+
+      this.sending = true;
+
+      // 触发发送验证码事件，父组件可以监听这个事件来处理发送逻辑
+      this.$emit("sendCaptcha", {
+        account: this.formdata.account,
+        pwd: this.formdata.pwd,
+        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);
+    },
+
+    // ============ 忘记密码功能 ============
+
+    // 打开忘记密码弹窗
+    openForgotDialog() {
+      this.forgotVisible = true;
+    },
+
+    // 忘记密码完成回调:回填账号到登录表单
+    onForgotFinish({ account }) {
+      if (account) {
+        this.formdata.account = account;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.login-wrapper {
+  width: 100%;
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 0 20px;
+
+  @media (max-width: 1024px) {
+    max-width: 800px;
+  }
+
+  @media (max-width: 768px) {
+    max-width: 100%;
+    padding: 0 15px;
+  }
+}
+
+.login-card {
+  background: var(--le-color-card-bg);
+  border-radius: 20px;
+  padding: 40px;
+  box-shadow:
+    0 20px 60px var(--le-color-card-shadow),
+    0 8px 30px rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--le-color-card-border);
+  overflow: hidden;
+
+  @media (max-width: 768px) {
+    padding: 30px 25px;
+    border-radius: 16px;
+  }
+
+  @media (max-width: 480px) {
+    padding: 25px 20px;
+  }
+}
+
+.login-layout {
+  display: flex;
+  min-height: 500px;
+  max-height: 500px;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    min-height: auto;
+  }
+}
+
+/* 左侧Logo区域 */
+.left-section {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  background: linear-gradient(
+    135deg,
+    var(--le-color-section-bg-from) 0%,
+    var(--le-color-section-bg-to) 100%
+  );
+  border-radius: 16px 0 0 16px;
+
+  @media (max-width: 768px) {
+    padding: 30px 25px;
+    border-radius: 16px 16px 0 0;
+    margin-bottom: 20px;
+  }
+
+  @media (max-width: 480px) {
+    padding: 25px 20px;
+  }
+}
+
+.logo-content {
+  text-align: center;
+  max-width: 320px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+
+  .logo-circle {
+    width: 100px;
+    height: 100px;
+    background: linear-gradient(
+      135deg,
+      var(--le-color-primary) 0%,
+      var(--le-color-primary-2) 100%
+    );
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 30px;
+    box-shadow:
+      0 15px 35px var(--le-color-primary-shadow),
+      0 5px 15px var(--le-color-primary-shadow-soft);
+
+    i {
+      font-size: 48px;
+      color: white;
+    }
+  }
+
+  .system-info {
+    margin-bottom: 30px;
+
+    h2 {
+      font-size: 28px;
+      font-weight: 700;
+      color: var(--le-color-text-strong);
+      margin: 0 0 15px 0;
+      line-height: 1.3;
+      letter-spacing: 0.5px;
+    }
+
+    .subtitle {
+      font-size: 16px;
+      color: var(--le-color-text-regular);
+      margin: 0;
+      font-weight: 400;
+      letter-spacing: 0.5px;
+      line-height: 1.5;
+    }
+  }
+
+  /* 左侧浏览器提示 */
+  .system-tips {
+    margin-top: auto;
+    padding-top: 20px;
+    text-align: center;
+    width: 100%;
+
+    .tip {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      color: var(--le-color-text-regular);
+      margin: 0;
+      line-height: 1.5;
+
+      i {
+        margin-right: 6px;
+        font-size: 13px;
+        color: var(--le-color-text-muted);
+      }
+    }
+  }
+
+  .decorative-line {
+    width: 60px;
+    height: 4px;
+    background: linear-gradient(
+      90deg,
+      var(--le-color-primary) 0%,
+      var(--le-color-primary-light) 100%
+    );
+    border-radius: 2px;
+    margin: 20px auto 0;
+  }
+}
+
+/* 右侧表单区域 */
+.right-section {
+  flex: 1.2;
+  display: flex;
+  flex-direction: column;
+  padding: 40px 40px 40px 50px;
+
+  @media (max-width: 1024px) {
+    padding: 40px 40px 40px 40px;
+  }
+
+  @media (max-width: 768px) {
+    padding: 0;
+  }
+}
+
+.form-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.form-header {
+  margin-bottom: 40px;
+
+  h3 {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--le-color-text-strong);
+    margin: 0 0 8px 0;
+  }
+
+  p {
+    font-size: 14px;
+    color: var(--le-color-text-regular);
+    margin: 0;
+    font-weight: 400;
+  }
+}
+
+.login-form {
+  .form-item {
+    margin-bottom: 28px;
+
+    &:last-of-type {
+      margin-bottom: 32px;
+    }
+
+    .el-form-item__label {
+      display: block;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--le-color-text-form);
+      margin-bottom: 10px;
+      padding-bottom: 0;
+    }
+  }
+
+  /* 验证码区域 */
+  .captcha-item {
+    margin-bottom: 32px;
+
+    .captcha-wrapper {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+
+      .captcha-input {
+        flex: 3; /* 增大输入框宽度比例 */
+
+        ::v-deep .el-input__inner {
+          height: 52px;
+          border-radius: 12px;
+          border: 2px solid var(--le-color-border);
+          font-size: 15px;
+          color: var(--le-color-input-text);
+          padding-left: 48px !important;
+          padding-right: 16px;
+          transition: all 0.2s ease;
+          box-sizing: border-box;
+
+          &:hover {
+            border-color: var(--le-color-border-hover);
+          }
+
+          &:focus {
+            border-color: var(--le-color-primary);
+            box-shadow: 0 0 0 3px var(--le-color-primary-shadow-soft);
+            outline: none;
+          }
+
+          &::placeholder {
+            color: var(--le-color-placeholder);
+          }
+        }
+
+        ::v-deep .el-input__prefix {
+          left: 16px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          pointer-events: none;
+
+          .el-icon {
+            color: var(--le-color-text-muted);
+            font-size: 20px;
+          }
+        }
+      }
+
+      .captcha-button {
+        flex: 1; /* 减小按钮宽度比例 */
+        min-width: 120px; /* 设置最小宽度 */
+        height: 52px;
+        border-radius: 12px;
+        background: linear-gradient(
+          135deg,
+          var(--le-color-success) 0%,
+          var(--le-color-success-2) 100%
+        );
+        border: none;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        position: relative;
+        overflow: hidden;
+
+        &:hover:not(.is-disabled) {
+          transform: translateY(-2px);
+          box-shadow: 0 12px 30px var(--le-color-success-shadow);
+          background: linear-gradient(
+            135deg,
+            var(--le-color-success-2) 0%,
+            #047857 100%
+          );
+        }
+
+        &:active {
+          transform: translateY(0);
+        }
+
+        &:focus {
+          outline: none;
+        }
+
+        .button-text {
+          font-size: 14px;
+          font-weight: 600;
+          letter-spacing: 0.5px;
+        }
+
+        &::after {
+          content: "";
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 5px;
+          height: 5px;
+          background: rgba(255, 255, 255, 0.5);
+          opacity: 0;
+          border-radius: 100%;
+          transform: scale(1, 1) translate(-50%);
+          transform-origin: 50% 50%;
+        }
+
+        &:focus:not(:active)::after {
+          animation: ripple 1s ease-out;
+        }
+      }
+    }
+  }
+}
+
+@keyframes ripple {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(20, 20);
+    opacity: 0;
+  }
+}
+
+::v-deep .custom-input {
+  .el-input {
+    display: flex;
+    align-items: center;
+  }
+
+  .el-input__inner {
+    height: 52px;
+    border-radius: 12px;
+    border: 2px solid var(--le-color-border);
+    font-size: 15px;
+    color: var(--le-color-input-text);
+    padding-left: 48px !important;
+    padding-right: 16px;
+    transition: all 0.2s ease;
+    box-sizing: border-box;
+
+    &:hover {
+      border-color: var(--le-color-border-hover);
+    }
+
+    &:focus {
+      border-color: var(--le-color-primary);
+      box-shadow: 0 0 0 3px var(--le-color-primary-shadow-soft);
+      outline: none;
+    }
+
+    &::placeholder {
+      color: var(--le-color-placeholder);
+    }
+  }
+
+  .el-input__prefix {
+    left: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+
+    .el-icon {
+      color: var(--le-color-text-muted);
+      font-size: 20px;
+    }
+  }
+
+  .el-input__suffix {
+    right: 16px;
+    display: flex;
+    align-items: center;
+
+    .el-icon {
+      color: var(--le-color-text-muted);
+      font-size: 20px;
+      cursor: pointer;
+      transition: color 0.2s ease;
+
+      &:hover {
+        color: var(--le-color-text-regular);
+      }
+    }
+  }
+
+  &.el-input--suffix .el-input__inner {
+    padding-right: 48px !important;
+  }
+}
+
+.login-btn-item {
+  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;
+  font-size: 16px;
+  font-weight: 600;
+  border-radius: 12px;
+  background: linear-gradient(
+    135deg,
+    var(--le-color-primary) 0%,
+    var(--le-color-primary-2) 100%
+  );
+  border: none;
+  transition: all 0.2s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 30px var(--le-color-primary-shadow);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+/* 暗色皮肤适配已由 LeTheme.set("dark") 统一管理,通过 CSS 变量覆盖:
+ * .login-card / .left-section / .system-info / .form-header / .form-item
+ * / .custom-input / .captcha-input / .captcha-button 等
+ * 详见 le-theme/common/vars.css 与 le-theme/index.js
+ */
+
+/* 动画效果 */
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInRight {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.left-section {
+  animation: fadeInLeft 0.6s ease-out;
+}
+
+.right-section {
+  animation: fadeInRight 0.6s ease-out 0.1s both;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .login-wrapper {
+    max-width: 500px;
+  }
+
+  .login-layout {
+    min-height: auto;
+  }
+
+  .left-section {
+    animation: none;
+    padding: 25px 20px;
+  }
+
+  .right-section {
+    animation: none;
+  }
+
+  .logo-content .logo-circle {
+    width: 80px;
+    height: 80px;
+    margin-bottom: 25px;
+
+    i {
+      font-size: 40px;
+    }
+  }
+
+  .logo-content .system-info {
+    margin-bottom: 25px;
+
+    h2 {
+      font-size: 24px;
+    }
+
+    .subtitle {
+      font-size: 14px;
+    }
+  }
+
+  .logo-content .system-tips {
+    margin-top: 20px;
+    padding-top: 15px;
+
+    .tip {
+      font-size: 11px;
+    }
+  }
+
+  .form-header {
+    margin-bottom: 30px;
+
+    h3 {
+      font-size: 22px;
+    }
+  }
+
+  ::v-deep .custom-input .el-input__inner,
+  ::v-deep .captcha-input .el-input__inner {
+    height: 48px;
+  }
+
+  .captcha-button {
+    height: 48px;
+    min-width: 90px;
+
+    .button-text {
+      font-size: 13px;
+    }
+  }
+
+  .login-btn {
+    height: 48px;
+  }
+}
+
+@media (max-width: 480px) {
+  .logo-content .logo-circle {
+    width: 70px;
+    height: 70px;
+    margin-bottom: 20px;
+
+    i {
+      font-size: 36px;
+    }
+  }
+
+  .logo-content .system-info {
+    h2 {
+      font-size: 22px;
+    }
+  }
+
+  .form-header {
+    margin-bottom: 25px;
+
+    h3 {
+      font-size: 20px;
+    }
+  }
+
+  .login-form .form-item,
+  .login-form .captcha-item {
+    margin-bottom: 24px;
+  }
+
+  /* 移动端验证码区域垂直排列 */
+  .captcha-item .captcha-wrapper {
+    flex-direction: column;
+    gap: 12px;
+
+    .captcha-input {
+      width: 100%;
+    }
+
+    .captcha-button {
+      width: 100%;
+      min-width: 100%;
+    }
+  }
+}
+</style>