update

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>

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",
+    "@kevisual/api": "^0.0.8",
-    "@types/qrcode": "^1.5.6",
+    "@types/bun": "^1.3.5"
-    "vite": "^7.3.0"
   }
 }

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>
-```

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';

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);

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;
+const LoginMethods = ['password', 'web', 'phone', 'wechat', 'wechat-mp', 'wechat-mp-ticket'] as const;
-type LoginMethods = 'password' | 'phone' | 'wechat' | 'wechat-mp' | 'wechat-mp-ticket';
+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');
+  const has51 = domain.includes('localhost') && (domain.endsWith('51515') || domain.endsWith('51015'));
-  if (has51015) {
+  if (has51) {
-    domain = 'localhost:51015'
+    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':
+    case 'localhost':
-      methods = ['password']
+      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]) {