@kevisual/kv-login 0.0.9 → 0.1.0

package/.cnb.yml

@@ -0,0 +1,12 @@
+$:
+  vscode:
+    - docker:
+        image: docker.cnb.cool/kevisual/dev-env:latest
+      services:
+        - vscode
+        - docker
+      imports: https://cnb.cool/kevisual/env/-/blob/main/env.yml
+      # 开发环境启动后会执行的任务
+      # stages:
+      #   - name: pnpm install
+      #     script: pnpm install

package/index.html

@@ -74,7 +74,7 @@
   <div class="demo-container">
     <div class="login-section">
       <h2>登录组件</h2>
-      <kv-login>
+      <kv-login method="password">
         <div id="weixinLogin"></div>
       </kv-login>
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kevisual/kv-login",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "description": "",
   "main": "src/main.ts",
   "scripts": {
@@ -14,13 +14,14 @@
   "keywords": [],
   "author": "abearxiong <xiongxiao@xiongxiao.me> (https://www.xiongxiao.me)",
   "license": "MIT",
-  "packageManager": "pnpm@10.24.0",
+  "packageManager": "pnpm@10.26.0",
   "publishConfig": {
     "access": "public"
   },
   "type": "module",
   "dependencies": {
     "@kevisual/context": "^0.0.4",
+    "@kevisual/query": "^0.0.32",
     "@kevisual/query-login": "^0.0.7",
     "lit-html": "^3.3.1",
     "qrcode": "^1.5.4"
@@ -31,6 +32,8 @@
   },
   "types": "./types/index.d.ts",
   "devDependencies": {
-    "@types/bun": "^1.3.3"
+    "@types/bun": "^1.3.4",
+    "@types/qrcode": "^1.5.6",
+    "vite": "^7.3.0"
   }
 }

package/readme.md

@@ -4,9 +4,26 @@
 
 黑白
 
-
 ```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">
+  <div id="weixinLogin"></div>
+</kv-login>
+```

package/src/main.ts

@@ -1,7 +1,4 @@
-import { checkPluginLogin, clearCode } from './modules/login-handle';
 import './pages/kv-login'
 import './pages/kv-message'
 
-export { loginEmitter } from './pages/kv-login'
-
-export { checkPluginLogin, clearCode }
+export { loginEmitter } from './pages/kv-login'

package/src/modules/login-handle.ts

@@ -93,13 +93,11 @@ const loginByWeChatMp = async (data: { wechatMpCode: string }) => {
   console.log('使用微信公众号登录:', data)
 }
 
-export const clearCode = () => {
+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 () => {
@@ -148,29 +146,6 @@ 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);

package/src/pages/kv-login.ts

@@ -85,6 +85,7 @@ class KvLogin extends HTMLElement {
         if (loginMethods.length > 0) {
           this.loginMethods = getLoginMethod(loginMethods)
           this.selectedMethod = loginMethods[0]
+          this.setLoginMethods(this.loginMethods);
           return;
         }
       }
@@ -133,8 +134,6 @@ class KvLogin extends HTMLElement {
 
   private handleLogin() {
     const formData = this.getFormData()
-    // console.log('登录方式:', this.selectedMethod)
-    // console.log('登录数据:', formData)
     loginHandle({
       loginMethod: this.selectedMethod,
       data: formData,

package/web.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<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>
+  <style>
+    body {
+      margin: 0;
+      padding: 20px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    }
+
+    .demo-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 20px;
+      padding: 40px 20px;
+    }
+
+    .button-group {
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+
+    .demo-button {
+      padding: 10px 20px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      transition: all 0.2s;
+    }
+
+    .demo-button.success {
+      background: #52c41a;
+      color: white;
+    }
+
+    .demo-button.success:hover {
+      background: #389e0d;
+    }
+
+    .demo-button.error {
+      background: #ff4d4f;
+      color: white;
+    }
+
+    .demo-button.error:hover {
+      background: #cf1322;
+    }
+
+    .demo-button.loading {
+      background: #1890ff;
+      color: white;
+    }
+
+    .demo-button.loading:hover {
+      background: #096dd9;
+    }
+
+    .login-section {
+      text-align: center;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="demo-container">
+    <div class="login-section">
+      <h2>登录组件</h2>
+      <kv-login method="password">
+        <div id="weixinLogin"></div>
+      </kv-login>
+    </div>
+  </div>
+</body>
+
+</html>

package/dist/app.d.ts

@@ -1,115 +0,0 @@
-interface KvMessageOptions {
-    type?: 'success' | 'error' | 'loading';
-    message: string;
-    duration?: number;
-    closable?: boolean;
-    position?: 'center' | 'right';
-}
-declare class KvMessage extends HTMLElement {
-    private options;
-    private timer;
-    constructor();
-    connectedCallback(): void;
-    setOptions(options: KvMessageOptions): void;
-    private render;
-    private setTimer;
-    remove(): void;
-    disconnectedCallback(): void;
-}
-declare class KvMessageManager {
-    private static instance;
-    private container;
-    private defaultPosition;
-    static getInstance(): KvMessageManager;
-    setDefaultPosition(position: 'center' | 'right'): void;
-    private getContainer;
-    show(options: KvMessageOptions): KvMessage;
-    success(message: string, options?: {
-        duration?: number;
-        position?: 'center' | 'right';
-        closable?: boolean;
-    }): KvMessage;
-    error(message: string, options?: {
-        duration?: number;
-        position?: 'center' | 'right';
-        closable?: boolean;
-    }): KvMessage;
-    loading(message: string, options?: {
-        position?: 'center' | 'right';
-        closable?: boolean;
-    }): KvMessage;
-    remove(message: KvMessage): void;
-    clear(): void;
-}
-declare const createMessage: () => KvMessageManager;
-declare global {
-    interface Window {
-        createMessage: typeof createMessage;
-    }
-}
-
-declare const clearCode: () => void;
-declare const checkPluginLogin: () => Promise<void>;
-
-interface EventData<T = any> {
-    type: string;
-    data: T;
-}
-type EventHandler<T = any> = (event: EventData<T>) => void;
-declare class EventEmitter {
-    private events;
-    /**
-     * 监听事件
-     * @param type 事件类型
-     * @param handler 事件处理函数
-     */
-    on<T = any>(type: string, handler: EventHandler<T>): void;
-    /**
-     * 移除事件监听器
-     * @param type 事件类型
-     * @param handler 事件处理函数 (可选，如果不提供则移除该类型的所有监听器)
-     */
-    off<T = any>(type: string, handler?: EventHandler<T>): void;
-    /**
-     * 触发事件
-     * @param event 事件对象，包含 type 和 data
-     */
-    emit<T = any>(event: EventData<T>): void;
-    /**
-     * 触发事件（简化版本，直接传递type和data）
-     * @param type 事件类型
-     * @param data 事件数据
-     */
-    emitSimple<T = any>(type: string, data: T): void;
-    /**
-     * 清空所有事件监听器
-     */
-    clear(): void;
-    /**
-     * 获取指定类型的监听器数量
-     * @param type 事件类型
-     * @returns 监听器数量
-     */
-    listenerCount(type: string): number;
-    /**
-     * 获取所有事件类型
-     * @returns 事件类型数组
-     */
-    eventNames(): string[];
-    /**
-     * 检查是否有指定类型的监听器
-     * @param type 事件类型
-     * @returns 是否有监听器
-     */
-    hasListeners(type: string): boolean;
-    /**
-     * 只监听一次事件
-     * @param type 事件类型
-     * @param handler 事件处理函数
-     */
-    once<T = any>(type: string, handler: EventHandler<T>): void;
-}
-
-declare const loginEmitter: EventEmitter;
-
-export { checkPluginLogin, clearCode, loginEmitter };