更新版本至0.1.13，添加随机ID生成函数，并在KvLogin类中使用

feat: enhance login handling and message creation
- Updated main.ts to export createMessage and queryLogin. - Modified checkPluginLogin in login-handle.ts to return structured results. - Refactored query.ts to adjust imports and export queryLogin. - Cleaned up kv-login.ts by removing unused imports and improving method handling. - Adjusted Vite configuration for deployment path changes. - Simplified web.html by removing unnecessary import maps and scripts. - Created web.ts to handle login success events and user redirection logic.
2026-02-04 13:44:04 +08:00 · 2026-02-03 18:33:35 +08:00 · 2025-12-28 17:57:21 +08:00 · 2025-12-28 17:57:20 +08:00
11 changed files with 628 additions and 388 deletions
--- a/index.html
+++ b/index.html
@@ -5,12 +5,27 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>KvMessage Demo</title>
-  <script type="module" src="./src/main.ts"></script>
+  <script type="module" src="./pages/web.ts"></script>
  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
    body {
      margin: 0;
-      padding: 20px;
+      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      min-height: 100vh;
+      background-image: url('https://zxj.tos-cn-shanghai.volces.com/img/20260119213348097_1768829628101.png');
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-attachment: fixed;
+      display: flex;
+      align-items: center;
+      justify-content: center;
    }

    .demo-container {
@@ -19,6 +34,8 @@
      align-items: center;
      gap: 20px;
      padding: 40px 20px;
+      width: 100%;
+      max-width: 500px;
    }

    .button-group {
@@ -30,42 +47,69 @@

    .demo-button {
      padding: 10px 20px;
-      border: none;
-      border-radius: 6px;
+      border: 2px solid rgba(255, 255, 255, 0.3);
+      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
-      transition: all 0.2s;
+      transition: all 0.3s ease;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .demo-button.success {
      background: #52c41a;
      color: white;
+      border-color: #52c41a;
    }

    .demo-button.success:hover {
      background: #389e0d;
+      border-color: #389e0d;
+      box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
    }

    .demo-button.error {
      background: #ff4d4f;
      color: white;
+      border-color: #ff4d4f;
    }

    .demo-button.error:hover {
      background: #cf1322;
+      border-color: #cf1322;
+      box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
    }

    .demo-button.loading {
      background: #1890ff;
      color: white;
+      border-color: #1890ff;
    }

    .demo-button.loading:hover {
      background: #096dd9;
+      border-color: #096dd9;
+      box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
    }

    .login-section {
      text-align: center;
+      background: rgba(255, 255, 255, 0.95);
+      padding: 40px 30px;
+      border-radius: 16px;
+      border: 2px solid rgba(255, 255, 255, 0.8);
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
+                  0 0 0 1px rgba(255, 255, 255, 0.5) inset;
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+      width: 100%;
+    }
+
+    .login-section h2 {
+      margin-bottom: 30px;
+      color: #1a1a1a;
+      font-size: 28px;
+      font-weight: 600;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
  </style>
 </head>
@@ -73,9 +117,9 @@
 <body>
  <div class="demo-container">
    <div class="login-section">
-      <h2>登录组件</h2>
-      <kv-login method="password,wechat,wechat-mp">
-      </kv-login>
+      <h2>登录</h2>
+      <!-- <kv-login method="wechat,password"></kv-login> -->
+      <kv-login></kv-login>
    </div>
  </div>
 </body>
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@kevisual/kv-login",
-  "version": "0.1.1",
+  "version": "0.1.13",
  "description": "",
  "main": "src/main.ts",
  "scripts": {
@@ -9,25 +9,27 @@
    "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.13 -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.28.2",
  "publishConfig": {
    "access": "public"
  },
  "type": "module",
-  "files": [
-    "types",
-    "dist"
-  ],
  "dependencies": {
+    "@kevisual/cache": "^0.0.5",
    "@kevisual/context": "^0.0.4",
-    "@kevisual/query": "^0.0.32",
-    "@kevisual/query-login": "^0.0.7",
-    "lit-html": "^3.3.1",
+    "@kevisual/query": "^0.0.39",
+    "crypto-js": "^4.2.0",
+    "lit-html": "^3.3.2",
    "qrcode": "^1.5.4"
  },
  "exports": {
@@ -36,8 +38,8 @@
  },
  "types": "./types/index.d.ts",
  "devDependencies": {
-    "@types/bun": "^1.3.4",
-    "@types/qrcode": "^1.5.6",
-    "vite": "^7.3.0"
+    "@kevisual/api": "^0.0.44",
+    "@types/bun": "^1.3.8",
+    "vite": "^7.3.1"
  }
 }
--- a/pages/web.ts
+++ b/pages/web.ts
@@ -0,0 +1,20 @@
+// import '../dist/app.js'
+import '../src/main.ts'
+// 
+
+import { loginEmitter, createMessage, checkPluginLogin, queryLogin } from '../src/main.ts'
+
+// const message = createMessage();
+loginEmitter.once('login-success', async (data) => {
+  console.log('登录成功，接收到的数据：');
+  const res = await checkPluginLogin()
+  if (res.code === 400 && res.data.redirectUrl) {
+    window.open(res.data.redirectUrl, '_self');
+  } else if (res.code === 400 && !res.data.redirectUrl) {
+
+    const me = await queryLogin.getMe();
+    console.log('用户信息：', me);
+    window.open('/root/home/', '_self');
+  }
+})
+
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- 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,11 @@
 import './pages/kv-login'
 import './pages/kv-message'
+import { createMessage } from './pages/kv-message';

-export { loginEmitter } from './pages/kv-login'
+export { loginEmitter } from './pages/kv-login'
+
+export { checkPluginLogin, clearCode } from './modules/login-handle';
+
+export { createMessage }
+
+export { queryLogin } from './modules/query.ts';
--- 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,41 @@ export const checkMpWechat = async () => {
    closePage();
  }
 }
+
+type CheckPluginLoginResult = {
+  code: number
+  data: {
+    redirectUrl: string
+  }
+}
+export const checkPluginLogin = async (): Promise<CheckPluginLoginResult> => {
+  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 { code: 200, data: { redirectUrl } }
+    }
+    // 刷新token失败，登陆页自己跳转
+  }
+  return {
+    code: 400,
+    data: {
+      redirectUrl: ''
+    }
+  }
+}
 const isWechat = () => {
  const ua = navigator.userAgent.toLowerCase();
  return /micromessenger/i.test(ua);
--- a/src/modules/query.ts
+++ b/src/modules/query.ts
@@ -1,10 +1,11 @@
 import { Query } from '@kevisual/query'
-import { QueryLoginBrowser } from '@kevisual/query-login';
+import { QueryLoginBrowser } from '@kevisual/api/query-login';


-export const queryBase = new Query()
+export const queryBase = new Query({})

-export const query = new QueryLoginBrowser({
+export const queryLogin = new QueryLoginBrowser({
  query: queryBase,
 })

+export const query = queryLogin;
--- a/src/pages/kv-login.ts
+++ b/src/pages/kv-login.ts
@@ -5,6 +5,11 @@ 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'
+
+const randomId = (num: number = 6) => {
+  return 'id-' + Math.random().toString(36).slice(2, num + 2);
+}
+
 export const loginEmitter = useContextKey('login-emitter', eventEmitter);
 export const WX_MP_APP_ID = "wxff97d569b1db16b6";
 interface LoginMethod {
@@ -17,29 +22,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: 'wechat', name: '微信登录', icon: 'wxmpSvg', appid: "wx9378885c8390e09b" },
+  { id: 'password', name: '密码登录', icon: 'pwd' },
+  { id: 'web', name: '网页登录', icon: 'web' },
  { 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 +55,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))
@@ -60,10 +67,13 @@ const getLoginMethodByDomain = (): LoginMethod[] => {
 const getLoginMethod = (methods: LoginMethods[]): LoginMethod[] => {
  return DefaultLoginMethods.filter(method => methods.includes(method.id))
 }
+export const findLoginMethod = (methodId: LoginMethods): LoginMethod | undefined => {
+  return DefaultLoginMethods.find(method => method.id === methodId);
+}
 class KvLogin extends HTMLElement {
  private selectedMethod: LoginMethods = 'password'

-  private loginMethods: LoginMethod[] = getLoginMethodByDomain();
+  private loginMethods: LoginMethod[] = [];
  setLoginMethods(methods: LoginMethod[]) {
    this.loginMethods = methods
    this.render()
@@ -74,24 +84,37 @@ class KvLogin extends HTMLElement {

  connectedCallback() {
    this.attachShadow({ mode: 'open' })
-    this.render()
    this.bindEvents()
    checkWechat()
    const method = this.getAttribute('method');
+    let id = this.id;
+    if (!id) {
+      id = randomId(6);
+      this.id = id;
+    }
+    let methodSetFlag = false;
    if (method) {
      const methods = method ? method.split(',') as LoginMethods[] : [];
      if (methods.length > 0) {
-        const loginMethods = methods.filter(m => LoginMethods.includes(m));
+        let loginMethods: LoginMethod[] = [];
+        for (const m of methods) {
+          const finded = findLoginMethod(m);
+          if (finded?.id) {
+            loginMethods.push(finded);
+          }
+        }
        if (loginMethods.length > 0) {
-          this.loginMethods = getLoginMethod(loginMethods)
-          this.selectedMethod = loginMethods[0]
-          this.setLoginMethods(this.loginMethods);
-          return;
+          methodSetFlag = true;
+          this.loginMethods = loginMethods;
+          this.selectedMethod = loginMethods[0].id;
        }
      }
+    }
+    if (!methodSetFlag) {
      this.loginMethods = getLoginMethodByDomain();
      this.selectedMethod = this.loginMethods[0].id;
    }
+    this.render()
  }
  #clearTimer: any = null;
  private selectLoginMethod(methodId: LoginMethods) {
@@ -134,6 +157,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 +185,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 +235,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">
@@ -241,6 +274,14 @@ class KvLogin extends HTMLElement {
  }

  private renderWechatForm() {
+    let weixinLogin = document.querySelector('#weixinLogin');
+    if (!weixinLogin) {
+      weixinLogin = document.createElement('div');
+      weixinLogin.id = 'weixinLogin';
+      const id = this.id;
+      const host = document.querySelector(`#${id}`)!;
+      host.appendChild(weixinLogin);
+    }
    return html`
      <div class="wechat-login">
        <slot></slot>
@@ -307,6 +348,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 +363,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]) {
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,8 +1,9 @@
 import { defineConfig } from 'vite';
+import { resolve } from 'path';

 const idDev = process.env.NODE_ENV === 'development';
 export default defineConfig({
-  base: idDev ? '/' : '/root/kv-login-test/',
+  base: idDev ? '/' : '/root/login/',
  server: {
    proxy: {
      '/api': {
--- a/web.html
+++ b/web.html
@@ -4,17 +4,9 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>KvMessage Demo</title>
-  <script type="importmap">
-    {
-      "imports": {
-        "@kevisual/kv-login": "https://esm.kevisual.cn/@kevisual/kv-login"
-      }
-    }
-  </script>
-  <script type="module">
-    import '@kevisual/kv-login';
-  </script>
+  <title>登录页面</title>
+
+  <script type="module" src="../pages/web.ts"> </script>
  <style>
    body {
      margin: 0;
@@ -83,9 +75,7 @@
  <div class="demo-container">
    <div class="login-section">
      <h2>登录组件</h2>
-      <kv-login method="password">
-        <div id="weixinLogin"></div>
-      </kv-login>
+      <kv-login></kv-login>
    </div>
  </div>
 </body>
Author	SHA1	Message	Date
abearxiong	2759ac42aa	更新版本至0.1.13，添加随机ID生成函数，并在KvLogin类中使用	2026-02-04 13:44:04 +08:00
abearxiong	a7829ba5e6	feat: enhance login handling and message creation - Updated main.ts to export createMessage and queryLogin. - Modified checkPluginLogin in login-handle.ts to return structured results. - Refactored query.ts to adjust imports and export queryLogin. - Cleaned up kv-login.ts by removing unused imports and improving method handling. - Adjusted Vite configuration for deployment path changes. - Simplified web.html by removing unnecessary import maps and scripts. - Created web.ts to handle login success events and user redirection logic.	2026-02-03 18:33:35 +08:00
abearxiong	6f2be438c9	updates	2025-12-28 17:57:21 +08:00
abearxiong	39bffa4529	update	2025-12-28 17:57:20 +08:00