update

2025-12-28 17:57:20 +08:00
parent 7db3f1f6dc
commit 39bffa4529
6 changed files with 96 additions and 57 deletions
--- a/index.html
+++ b/index.html
@@ -74,7 +74,8 @@
  <div class="demo-container">
    <div class="login-section">
      <h2>登录组件</h2>
-      <kv-login method="password,wechat,wechat-mp">
+      <kv-login>
+        <div id="weixinLogin"></div>
      </kv-login>
    </div>
  </div>
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@kevisual/kv-login",
-  "version": "0.1.1",
+  "version": "0.1.4",
  "description": "",
  "main": "src/main.ts",
  "scripts": {
@@ -9,25 +9,26 @@
    "postbuild": "dts -i src/main.ts -o app.d.ts",
    "build:test": "vite build",
    "prepub": "rm -rf ./dist && pnpm run build:test",
-    "pub": "ev deploy ./dist -k kv-login-test -v 0.0.6 -u -y yes"
+    "pub": "ev deploy ./dist -k login -v 0.1.4 -u -y yes"
  },
  "keywords": [],
+  "files": [
+    "types",
+    "src",
+    "dist"
+  ],
  "author": "abearxiong <xiongxiao@xiongxiao.me> (https://www.xiongxiao.me)",
  "license": "MIT",
-  "packageManager": "pnpm@10.26.0",
+  "packageManager": "pnpm@10.26.2",
  "publishConfig": {
    "access": "public"
  },
  "type": "module",
-  "files": [
-    "types",
-    "dist"
-  ],
  "dependencies": {
    "@kevisual/context": "^0.0.4",
-    "@kevisual/query": "^0.0.32",
    "@kevisual/query-login": "^0.0.7",
-    "lit-html": "^3.3.1",
+    "crypto-js": "^4.2.0",
+    "lit-html": "^3.3.2",
    "qrcode": "^1.5.4"
  },
  "exports": {
@@ -36,8 +37,7 @@
  },
  "types": "./types/index.d.ts",
  "devDependencies": {
-    "@types/bun": "^1.3.4",
-    "@types/qrcode": "^1.5.6",
-    "vite": "^7.3.0"
+    "@kevisual/api": "^0.0.8",
+    "@types/bun": "^1.3.5"
  }
 }
--- a/readme.md
+++ b/readme.md
@@ -4,24 +4,9 @@

 黑白

+
 ```html
 <kv-login>
+  <div id="weixinLogin"></div>
 </kv-login>
-```
-
-## 网页
-
-```html
-<script type="importmap">
-  {
-    "imports": {
-      "@kevisual/kv-login": "https://esm.kevisual.cn/@kevisual/kv-login"
-    }
-  }
-</script>
-<script type="module">
-  import '@kevisual/kv-login';
-</script>
-<kv-login method="password,wechat,wechat-mp">
-</kv-login>
-```
+```
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,6 @@
 import './pages/kv-login'
 import './pages/kv-message'

-export { loginEmitter } from './pages/kv-login'
+export { loginEmitter } from './pages/kv-login'
+
+export { checkPluginLogin, clearCode } from './modules/login-handle';
--- a/src/modules/login-handle.ts
+++ b/src/modules/login-handle.ts
@@ -2,9 +2,11 @@ import { query } from './query.ts';
 import { createMessage } from '../pages/kv-message.ts';
 import { WX_MP_APP_ID } from '../pages/kv-login.ts';
 import { emit } from './mitt.ts';
+import { Query } from '@kevisual/query';
+import { QueryLoginBrowser } from '@kevisual/api/login'
 export const message = createMessage();
 type LoginOpts = {
-  loginMethod: 'password' | 'phone' | 'wechat' | 'wechat-mp' | 'wechat-mp-ticket',
+  loginMethod: 'password' | 'web' | 'phone' | 'wechat' | 'wechat-mp' | 'wechat-mp-ticket',
  data: any,
  el: HTMLElement
 }
@@ -40,10 +42,28 @@ export const loginHandle = async (opts: LoginOpts) => {
    case 'wechat':
      await loginByWeChat(data)
      break
+    case 'web':
+      await loginByWeb(data)
+      break
    default:
      console.warn('未知的登录方式:', loginMethod)
  }
 }
+const loginByWeb = async (data: {}) => {
+  const url = new URL("https://kevisual.cn/api/router");
+  const query = new Query({ url: "https://kevisual.cn/api/router" })
+  const login = new QueryLoginBrowser({ query })
+  // @ts-ignore
+  const res = login.loginWithWeb(url.origin, {})
+  console.log('打开网页登录:', res)
+  window.open(res.url, '_blank');
+  const status = await login.pollLoginStatus(res);
+  if (status) {
+    redirectHome()
+  } else {
+    message.error('网页登录失败，请重试')
+  }
+}
 /**
 * 使用用户名和密码登录
 * @param data 
@@ -93,11 +113,13 @@ const loginByWeChatMp = async (data: { wechatMpCode: string }) => {
  console.log('使用微信公众号登录:', data)
 }

-const clearCode = () => {
+export const clearCode = () => {
  const url = new URL(window.location.href);
  // 清理 URL 中的 code 参数
  url.searchParams.delete('code');
  url.searchParams.delete('state');
+  url.searchParams.delete('user-check');
+  url.searchParams.delete('redirect');
  window.history.replaceState({}, document.title, url.toString());
 }
 export const checkWechat = async () => {
@@ -146,6 +168,29 @@ export const checkMpWechat = async () => {
    closePage();
  }
 }
+export const checkPluginLogin = async () => {
+  const userCheck = 'user-check';
+  const url = new URL(location.href);
+  const redirect = url.searchParams.get('redirect');
+  const redirectUrl = redirect ? decodeURIComponent(redirect) : '';
+  const checkKey = url.searchParams.get(userCheck);
+  if (redirect && checkKey) {
+    // 通过refresh_token 刷新token
+    const me = await query.getMe();
+    if (me.code === 200) {
+      message.success('登录插件中...');
+      const token = await query.cacheStore.getAccessToken();
+      const newRedirectUrl = new URL(redirectUrl);
+      newRedirectUrl.searchParams.set('token', token + '');
+      setTimeout(() => {
+        window.open(newRedirectUrl.toString(), '_blank');
+      }, 2000);
+      return;
+    }
+    // 刷新token失败，登陆页自己跳转
+  }
+  console.log('checkKey', checkKey, redirectUrl);
+}
 const isWechat = () => {
  const ua = navigator.userAgent.toLowerCase();
  return /micromessenger/i.test(ua);
--- a/src/pages/kv-login.ts
+++ b/src/pages/kv-login.ts
@@ -1,10 +1,11 @@
 import { render, html } from 'lit-html'
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'
-import { loginHandle, checkWechat, getQrCode, checkMpQrCodeLogin } from '../modules/login-handle.ts'
+import { loginHandle, checkWechat, getQrCode, checkMpQrCodeLogin, redirectHome } from '../modules/login-handle.ts'
 import { setWxerwma } from '../modules/wx/ws-login.ts';
 import { useCreateLoginQRCode } from '../modules/wx-mp/qr.ts';
 import { eventEmitter } from '../modules/mitt.ts';
 import { useContextKey } from '@kevisual/context'
+
 export const loginEmitter = useContextKey('login-emitter', eventEmitter);
 export const WX_MP_APP_ID = "wxff97d569b1db16b6";
 interface LoginMethod {
@@ -17,29 +18,31 @@ const wxmpSvg = `<svg t="1764510467010" class="icon" viewBox="0 0 1024 1024" ver
 const wxOpenSvg = `<svg t="1764511395617" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3882" width="32" height="32"><path d="M256 259.584c-29.184 0-51.2 14.848-51.2 44.032s29.184 44.032 51.2 44.032c29.184 0 44.032-14.848 44.032-44.032s-22.016-44.032-44.032-44.032zM541.184 303.616c0-29.184-14.848-44.032-44.032-44.032-29.184 0-51.2 14.848-51.2 44.032s29.184 44.032 51.2 44.032c29.696 0 44.032-22.016 44.032-44.032zM614.4 508.416c-14.848 0-36.352 14.848-36.352 36.352 0 14.848 14.848 36.352 36.352 36.352 29.184 0 44.032-14.848 44.032-36.352 0-14.336-14.848-36.352-44.032-36.352z" p-id="3883"></path><path d="M1024 625.152c0-138.752-124.416-256-285.184-270.848-29.184-153.6-189.952-263.168-373.248-263.168C160.768 91.648 0 230.4 0 406.016c0 95.232 44.032 175.616 138.752 241.152L109.568 742.4c0 7.168 0 14.848 7.168 22.016h14.848l117.248-58.368h14.848c36.352 7.168 66.048 14.848 109.568 14.848 14.848 0 44.032-7.168 44.032-7.168C460.8 822.784 578.048 896 716.8 896c36.352 0 73.216-7.168 102.4-14.848l87.552 51.2h14.848c7.168-7.168 7.168-7.168 7.168-14.848l-22.016-87.552c80.896-58.368 117.248-131.584 117.248-204.8z m-621.568 51.2h-36.352c-36.352 0-66.048-7.168-95.232-14.848l-22.016-7.168h-7.168L153.6 698.368l22.016-66.048c0-7.168 0-14.848-7.168-14.848C80.384 559.616 36.352 486.4 36.352 398.848 36.352 245.248 182.784 128 358.4 128c160.768 0 300.032 95.232 329.216 226.816-168.448 0-300.032 117.248-300.032 263.168 7.168 22.016 14.848 44.032 14.848 58.368z m467.968 132.096c-7.168 7.168-7.168 7.168-7.168 14.848l14.848 51.2L819.2 844.8h-14.848c-29.184 7.168-66.048 14.848-95.232 14.848-146.432 0-270.848-102.4-270.848-226.816 0-131.584 124.416-233.984 270.848-233.984s270.848 102.4 270.848 226.816c0 65.536-36.352 123.904-109.568 182.784z" p-id="3884"></path><path d="M804.352 508.416c-14.848 0-36.352 14.848-36.352 36.352 0 14.848 14.848 36.352 36.352 36.352 29.184 0 44.032-14.848 44.032-36.352 0-14.336-14.336-36.352-44.032-36.352z" p-id="3885"></path></svg>`
 const phone = `<svg t="1764511425462" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5097" width="32" height="32"><path d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z" p-id="5098"></path></svg>`
 const pwd = `<svg t="1764511500570" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10511" width="32" height="32"><path d="M768.9216 422.72768 372.06016 422.72768C378.88 365.21984 329.37984 131.42016 512.2048 125.72672c173.83424-6.59456 146.78016 213.34016 146.78016 213.34016l85.13536 0.57344c0 0 24.73984-294.4-231.91552-295.8336C232.09984 58.01984 297.82016 377.18016 289.28 422.72768c1.98656 0 4.56704 0 7.29088 0-55.88992 0-101.21216 45.34272-101.21216 101.21216l0 337.38752c0 55.88992 45.34272 101.21216 101.21216 101.21216l472.35072 0c55.88992 0 101.21216-45.34272 101.21216-101.21216L870.13376 523.93984C870.13376 468.0704 824.79104 422.72768 768.9216 422.72768zM566.4768 717.02528l0 76.84096c0 18.57536-15.1552 33.73056-33.73056 33.73056-18.57536 0-33.73056-15.1552-33.73056-33.73056l0-76.84096c-20.09088-11.69408-33.73056-33.21856-33.73056-58.12224 0-37.2736 30.208-67.4816 67.4816-67.4816 37.2736 0 67.4816 30.208 67.4816 67.4816C600.22784 683.80672 586.58816 705.3312 566.4768 717.02528z" fill="#272636" p-id="10512"></path></svg>`
-
+const web = `<svg t="1764511538113" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11994" width="32" height="32"><path d="M512 85.333333C264.533333 85.333333 64 285.866667 64 533.333333s200.533333 448 448 448 448-200.533333 448-448S759.466667 85.333333 512 85.333333z m0 810.666667c-200.533333 0-362.666667-162.133333-362.666667-362.666667S311.466667 170.666667 512 170.666667s362.666667 162.133333 362.666667 362.666667-162.133333 362.666667-362.666667 362.666667z" p-id="11995"></path><path d="M512 298.666667c-119.466667 0-216.533333 97.066667-216.533333 216.533333s97.066667 216.533333 216.533333 216.533333 216.533333-97.066667 216.533333-216.533333-97.066667-216.533333-216.533333-216.533333z m0 362.666666c-80.853333 0-146.133333-65.28-146.133333-146.133333s65.28-146.133333 146.133333-146.133333 146.133333 65.28 146.133333 146.133333-65.28 146.133333-146.133333 146.133333z" p-id="11996"></path></svg>`
 const icons: any = {
  pwd,
+  web,
  phone,
  wxmpSvg,
  wxOpenSvg
 }
 const DefaultLoginMethods: LoginMethod[] = [
  { id: 'password', name: '密码登录', icon: 'pwd' },
+  { id: 'web', name: '网页登录', icon: 'web' },
  { id: 'wechat', name: '微信登录', icon: 'wxmpSvg', appid: "wx9378885c8390e09b" },
  { id: 'wechat-mp', name: '微信公众号', icon: 'wxOpenSvg', appid: WX_MP_APP_ID },
  { id: 'wechat-mp-ticket', name: '微信公众号', icon: 'wxOpenSvg' },
  { id: 'phone', name: '手机号登录', icon: 'phone' }
 ]
-const LoginMethods = ['password', 'phone', 'wechat', 'wechat-mp', 'wechat-mp-ticket'] as const;
-type LoginMethods = 'password' | 'phone' | 'wechat' | 'wechat-mp' | 'wechat-mp-ticket';
+const LoginMethods = ['password', 'web', 'phone', 'wechat', 'wechat-mp', 'wechat-mp-ticket'] as const;
+type LoginMethods = 'password' | 'web' | 'phone' | 'wechat' | 'wechat-mp' | 'wechat-mp-ticket';

 const getLoginMethodByDomain = (): LoginMethod[] => {
  let domain = window.location.host
  let methods: LoginMethods[] = []
-  const has51015 = domain.includes('51015');
-  if (has51015) {
-    domain = 'localhost:51015'
+  const has51 = domain.includes('localhost') && (domain.endsWith('51515') || domain.endsWith('51015'));
+  if (has51) {
+    domain = 'localhost'
  }
  switch (domain) {
    case 'kevisual.xiongxiao.me':
@@ -48,11 +51,11 @@ const getLoginMethodByDomain = (): LoginMethod[] => {
    case 'kevisual.cn':
      methods = ['password', 'wechat-mp-ticket', 'wechat',]
      break;
-    case 'localhost:51015':
-      methods = ['password']
+    case 'localhost':
+      methods = ['password', 'web']
      break
    default:
-      methods = ['password', 'phone', 'wechat', 'wechat-mp', 'wechat-mp-ticket']
+      methods = ['password', 'web', 'phone', 'wechat', 'wechat-mp', 'wechat-mp-ticket']
      break;
  }
  return DefaultLoginMethods.filter(method => methods.includes(method.id))
@@ -85,7 +88,6 @@ class KvLogin extends HTMLElement {
        if (loginMethods.length > 0) {
          this.loginMethods = getLoginMethod(loginMethods)
          this.selectedMethod = loginMethods[0]
-          this.setLoginMethods(this.loginMethods);
          return;
        }
      }
@@ -134,6 +136,8 @@ class KvLogin extends HTMLElement {

  private handleLogin() {
    const formData = this.getFormData()
+    // console.log('登录方式:', this.selectedMethod)
+    // console.log('登录数据:', formData)
    loginHandle({
      loginMethod: this.selectedMethod,
      data: formData,
@@ -160,7 +164,8 @@ class KvLogin extends HTMLElement {
          username: username?.value || '',
          password: password?.value || ''
        }
-
+      case 'web':
+        return {}
      case 'phone':
        const phone = this.shadowRoot.querySelector('#phone') as HTMLInputElement
        const code = this.shadowRoot.querySelector('#code') as HTMLInputElement
@@ -209,7 +214,14 @@ class KvLogin extends HTMLElement {
      </form>
    `
  }
-
+  private renderWebForm() {
+    return html`
+      <div class="web-login">
+        <button type="button" class="refresh-button" @click=${this.handleLogin.bind(this)}>点击登录</button>
+        <slot></slot>
+      </div>
+    `
+  }
  private renderPhoneForm() {
    return html`
      <form id="loginForm" class="login-form">
@@ -307,6 +319,8 @@ class KvLogin extends HTMLElement {
    switch (this.selectedMethod) {
      case 'password':
        return this.renderPasswordForm()
+      case 'web':
+        return this.renderWebForm()
      case 'phone':
        return this.renderPhoneForm()
      case 'wechat':
@@ -320,18 +334,10 @@ class KvLogin extends HTMLElement {
        return this.renderPasswordForm()
    }
  }
-  createWeixinEl(){
-    const id = 'weixinLogin';
-    let el = this.querySelector('#' + id);
-    if (el) return el;
-    const weixinEl = document.createElement('div');
-    weixinEl.id = 'weixinLogin';
-    this.appendChild(weixinEl);
-    return weixinEl;
-  }
+
  render() {
    if (!this.shadowRoot) return
-    this.createWeixinEl();
+
    const renderIcon = (icon: any) => {
      // 如果是emoji字符，直接返回
      if (typeof icon === 'string' && !icons[icon]) {