@kevisual/kv-login 0.0.1

package/src/pages/kv-login.ts

@@ -0,0 +1,466 @@
+import { render, html } from 'lit-html'
+import { loginHandle, checkWechat } from '../modules/login-handle.ts'
+import { setWxerwma } from '../modules/wx/ws-login.ts';
+import { useCreateLoginQRCode } from '../modules/wx-mp/qr.ts';
+export const WX_MP_APP_ID = "wxff97d569b1db16b6";
+interface LoginMethod {
+  id: LoginMethods
+  name: string
+  icon: string
+  appid?: string
+}
+const DefaultLoginMethods: LoginMethod[] = [
+  { id: 'password', name: '密码登录', icon: '🔒' },
+  { id: 'wechat', name: '微信登录', icon: '💬', appid: "wx9378885c8390e09b" },
+  { id: 'wechat-mp', name: '微信公众号登录', icon: '💬', appid: WX_MP_APP_ID },
+  { id: 'phone', name: '手机号登录', icon: '📱' }
+]
+type LoginMethods = 'password' | 'phone' | 'wechat' | 'wechat-mp'
+const getLoginMethodByDomain = (): LoginMethod[] => {
+  const domain = window.location.hostname
+  let methods: LoginMethods[] = []
+  switch (domain) {
+    case 'kevisual.xiongxiao.me':
+      methods = ['password', 'wechat-mp']
+      break;
+    case 'kevisual.cn':
+      methods = ['password', 'wechat']
+      break;
+    default:
+      methods = ['password', 'phone', 'wechat', 'wechat-mp']
+      break;
+  }
+  return DefaultLoginMethods.filter(method => methods.includes(method.id))
+}
+console.log('可用登录方式:', getLoginMethodByDomain().map(m => m.name).join(', '));
+class KvLogin extends HTMLElement {
+  private selectedMethod: LoginMethods = 'password'
+
+  private loginMethods: LoginMethod[] = getLoginMethodByDomain();
+  setLoginMethods(methods: LoginMethod[]) {
+    this.loginMethods = methods
+    this.render()
+  }
+  constructor() {
+    super()
+  }
+
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' })
+    this.render()
+    this.bindEvents()
+    checkWechat()
+
+  }
+  #clearTimer: any = null;
+  private selectLoginMethod(methodId: LoginMethods) {
+    this.selectedMethod = methodId
+    this.render()
+    if (this.#clearTimer) {
+      this.#clearTimer();
+      this.#clearTimer = null;
+    }
+  }
+  private getMethodData(methodId: LoginMethods): LoginMethod | undefined {
+    return this.loginMethods.find(method => method.id === methodId);
+  }
+  private bindEvents() {
+    if (!this.shadowRoot) return
+
+    // 使用事件委托来处理登录方式切换
+    this.shadowRoot.addEventListener('click', (e) => {
+      const target = e.target as HTMLElement
+      const methodButton = target.closest('.login-method')
+      if (methodButton) {
+        const methodId = methodButton.getAttribute('data-method') as LoginMethods
+        if (methodId) {
+          this.selectLoginMethod(methodId)
+        }
+      }
+    })
+
+    // 使用事件委托来处理表单提交
+    this.shadowRoot.addEventListener('submit', (e) => {
+      const target = e.target as HTMLElement
+      if (target && target.id === 'loginForm') {
+        e.preventDefault()
+        this.handleLogin()
+      }
+    })
+  }
+
+  private handleLogin() {
+    const formData = this.getFormData()
+    // console.log('登录方式:', this.selectedMethod)
+    // console.log('登录数据:', formData)
+    loginHandle({
+      loginMethod: this.selectedMethod,
+      data: formData,
+      el: this
+    })
+    // 这里可以触发自定义事件，通知父组件
+    this.dispatchEvent(new CustomEvent('login', {
+      detail: {
+        method: this.selectedMethod,
+        data: formData
+      },
+      bubbles: true
+    }))
+  }
+
+  private getFormData(): any {
+    if (!this.shadowRoot) return {}
+
+    switch (this.selectedMethod) {
+      case 'password':
+        const username = this.shadowRoot.querySelector('#username') as HTMLInputElement
+        const password = this.shadowRoot.querySelector('#password') as HTMLInputElement
+        return {
+          username: username?.value || '',
+          password: password?.value || ''
+        }
+
+      case 'phone':
+        const phone = this.shadowRoot.querySelector('#phone') as HTMLInputElement
+        const code = this.shadowRoot.querySelector('#code') as HTMLInputElement
+        return {
+          phone: phone?.value || '',
+          code: code?.value || ''
+        }
+
+      case 'wechat':
+        return {
+          wechatCode: 'mock_wechat_code'
+        }
+      case 'wechat-mp':
+        return {
+          wechatMpCode: 'mock_wechat_mp_code'
+        }
+      default:
+        return {}
+    }
+  }
+
+  private renderPasswordForm() {
+    return html`
+      <form id="loginForm" class="login-form">
+        <div class="form-group">
+          <input
+            type="text"
+            id="username"
+            name="username"
+            placeholder="请输入用户名"
+            autocomplete="username"
+            required
+          />
+        </div>
+        <div class="form-group">
+          <input
+            type="password"
+            id="password"
+            name="password"
+            placeholder="请输入密码"
+            autocomplete="current-password"
+            required
+          />
+        </div>
+        <button type="submit" class="login-button">登录</button>
+      </form>
+    `
+  }
+
+  private renderPhoneForm() {
+    return html`
+      <form id="loginForm" class="login-form">
+        <div class="form-group">
+          <input
+            type="tel"
+            id="phone"
+            name="phone"
+            placeholder="请输入手机号"
+            pattern="[0-9]{11}"
+            autocomplete="tel"
+            required
+          />
+        </div>
+        <div class="form-group code-group">
+          <input
+            type="text"
+            id="code"
+            name="code"
+            placeholder="请输入验证码"
+            autocomplete="one-time-code"
+            required
+          />
+          <button type="button" class="code-button" @click=${this.sendVerificationCode}>获取验证码</button>
+        </div>
+        <button type="submit" class="login-button">登录</button>
+      </form>
+    `
+  }
+
+  private renderWechatForm() {
+    return html`
+      <div class="wechat-login">
+        <slot></slot>
+      </div>
+    `
+  }
+  private renderWechatMpForm() {
+    const that = this
+    setTimeout(() => {
+      const qrcode = that.shadowRoot!.querySelector('#qrcode');
+      const { clear } = useCreateLoginQRCode(qrcode as HTMLCanvasElement);
+      that.#clearTimer = clear;
+    }, 0)
+    return html`
+      <div class="wechat-login">
+        <div class="qr-container">
+          <div class="qr-placeholder">
+            <canvas id='qrcode' width='300' height='300'></canvas>
+            <p class="qr-desc">请使用微信扫描二维码登录</p>
+          </div>
+        </div>
+      </div>
+    `
+  }
+
+  private sendVerificationCode() {
+    console.log('发送验证码')
+    // 这里可以实现发送验证码的逻辑
+  }
+
+  private refreshQR() {
+    console.log('刷新二维码')
+    // 这里可以实现刷新二维码的逻辑
+  }
+
+
+  private renderLoginForm() {
+    const data = this.getMethodData(this.selectedMethod);
+    switch (this.selectedMethod) {
+      case 'password':
+        return this.renderPasswordForm()
+      case 'phone':
+        return this.renderPhoneForm()
+      case 'wechat':
+        setWxerwma({ appid: data?.appid! || "" });
+        return this.renderWechatForm()
+      case 'wechat-mp':
+        return this.renderWechatMpForm()
+      default:
+        return this.renderPasswordForm()
+    }
+  }
+
+  render() {
+    if (!this.shadowRoot) return
+
+    const template = html`
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          min-width: 400px;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+
+        .login-sidebar {
+          background: white;
+          border-radius: 12px;
+          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+          overflow: hidden;
+        }
+
+        .login-methods {
+          display: flex;
+          background: #f8f9fa;
+          border-bottom: 1px solid #e9ecef;
+        }
+
+        .login-method {
+          flex: 1;
+          padding: 16px 8px;
+          border: none;
+          background: none;
+          cursor: pointer;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 4px;
+          transition: all 0.3s ease;
+          position: relative;
+        }
+
+        .login-method:hover {
+          background: #e9ecef;
+        }
+
+        .login-method.active {
+          background: white;
+          color: #007bff;
+        }
+
+        .login-method.active::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: 2px;
+          background: #007bff;
+        }
+
+        .method-icon {
+          font-size: 20px;
+        }
+
+        .method-name {
+          font-size: 12px;
+          font-weight: 500;
+        }
+
+        .login-content {
+          padding: 32px 24px;
+        }
+        .impowerBox .qrcode {
+          width: 200px !important;
+        }
+        .login-form {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
+        .form-group {
+          position: relative;
+        }
+
+        .form-group input {
+          width: 100%;
+          padding: 12px 16px;
+          border: 2px solid #e9ecef;
+          border-radius: 8px;
+          font-size: 14px;
+          transition: border-color 0.3s ease;
+          box-sizing: border-box;
+        }
+
+        .form-group input:focus {
+          outline: none;
+          border-color: #007bff;
+        }
+
+        .code-group {
+          display: flex;
+          gap: 12px;
+        }
+
+        .code-group input {
+          flex: 1;
+        }
+
+        .code-button {
+          padding: 0 16px;
+          background: #6c757d;
+          color: white;
+          border: none;
+          border-radius: 8px;
+          font-size: 14px;
+          cursor: pointer;
+          white-space: nowrap;
+          transition: background-color 0.3s ease;
+        }
+
+        .code-button:hover {
+          background: #5a6268;
+        }
+
+        .login-button {
+          padding: 12px;
+          background: #007bff;
+          color: white;
+          border: none;
+          border-radius: 8px;
+          font-size: 16px;
+          font-weight: 500;
+          cursor: pointer;
+          transition: background-color 0.3s ease;
+        }
+
+        .login-button:hover {
+          background: #0056b3;
+        }
+
+        .wechat-login {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 20px;
+        }
+
+        .qr-container {
+          width: 400px;
+          height: 400px;
+          border: 2px dashed #e9ecef;
+          border-radius: 8px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .qr-placeholder {
+          text-align: center;
+          color: #6c757d;
+        }
+
+        .qr-icon {
+          font-size: 48px;
+          margin-bottom: 8px;
+        }
+
+        .qr-desc {
+          font-size: 12px;
+          margin-top: 4px;
+        }
+
+        .refresh-button {
+          padding: 8px 16px;
+          background: #6c757d;
+          color: white;
+          border: none;
+          border-radius: 6px;
+          font-size: 14px;
+          cursor: pointer;
+          transition: background-color 0.3s ease;
+        }
+
+        .refresh-button:hover {
+          background: #5a6268;
+        }
+      </style>
+
+      <div class="login-sidebar">
+        <div class="login-methods">
+          ${this.loginMethods.map(method => html`
+            <button
+              class="login-method ${this.selectedMethod === method.id ? 'active' : ''}"
+              data-method="${method.id}"
+            >
+              <span class="method-icon">${method.icon}</span>
+              <span class="method-name">${method.name}</span>
+            </button>
+          `)}
+        </div>
+
+        <div class="login-content">
+          ${this.renderLoginForm()}
+        </div>
+      </div>
+    `
+
+    render(template, this.shadowRoot)
+  }
+}
+
+customElements.define('kv-login', KvLogin)