@kevisual/kv-login 0.1.3 → 0.1.4

package/dist/app.js

@@ -2052,7 +2052,7 @@ var require_browser = __commonJS((exports) => {
   });
 });
 
-// ../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/development/lit-html.js
+// ../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/development/lit-html.js
 var DEV_MODE = true;
 var ENABLE_EXTRA_SECURITY_HOOKS = true;
 var ENABLE_SHADYDOM_NOPATCH = true;
@@ -2857,7 +2857,7 @@ class ElementPart {
 }
 var polyfillSupport = DEV_MODE ? global.litHtmlPolyfillSupportDevMode : global.litHtmlPolyfillSupport;
 polyfillSupport?.(Template, ChildPart);
-(global.litHtmlVersions ??= []).push("3.3.1");
+(global.litHtmlVersions ??= []).push("3.3.2");
 if (DEV_MODE && global.litHtmlVersions.length > 1) {
   queueMicrotask(() => {
     issueWarning("multiple-versions", `Multiple versions of Lit loaded. ` + `Loading multiple versions is not recommended.`);
@@ -2901,7 +2901,7 @@ if (ENABLE_EXTRA_SECURITY_HOOKS) {
   }
 }
 
-// ../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/development/directive.js
+// ../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/development/directive.js
 var PartType = {
   ATTRIBUTE: 1,
   CHILD: 2,
@@ -2933,7 +2933,7 @@ class Directive {
   }
 }
 
-// ../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/development/directives/unsafe-html.js
+// ../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/development/directives/unsafe-html.js
 var HTML_RESULT2 = 1;
 
 class UnsafeHTMLDirective extends Directive {
@@ -4166,6 +4166,894 @@ class EventEmitter {
 var eventEmitter = new EventEmitter;
 var emit = (event) => eventEmitter.emit(event);
 
+// ../../node_modules/.pnpm/@kevisual+api@0.0.8/node_modules/@kevisual/api/query/query-login/login-cache.ts
+class LoginCacheStore2 {
+  cache;
+  name;
+  cacheData;
+  constructor(opts) {
+    if (!opts.cache) {
+      throw new Error("cache is required");
+    }
+    this.cache = opts.cache;
+    this.cacheData = {
+      loginUsers: [],
+      user: undefined,
+      id: undefined,
+      accessToken: undefined,
+      refreshToken: undefined
+    };
+    this.name = opts.name;
+  }
+  async setValue(value) {
+    await this.cache.set(this.name, value);
+    this.cacheData = value;
+    return value;
+  }
+  async delValue() {
+    await this.cache.del();
+  }
+  getValue() {
+    return this.cache.get(this.name);
+  }
+  async init() {
+    const defaultData = {
+      loginUsers: [],
+      user: null,
+      id: null,
+      accessToken: null,
+      refreshToken: null
+    };
+    if (this.cache.init) {
+      try {
+        const cacheData = await this.cache.init();
+        this.cacheData = cacheData || defaultData;
+      } catch (error) {
+        console.log("cacheInit error", error);
+      }
+    } else {
+      this.cacheData = await this.getValue() || defaultData;
+    }
+  }
+  async setLoginUser(user) {
+    const has = this.cacheData.loginUsers.find((u) => u.id === user.id);
+    if (has) {
+      this.cacheData.loginUsers = this.cacheData?.loginUsers?.filter((u) => u?.id && u.id !== user.id);
+    }
+    this.cacheData.loginUsers.push(user);
+    this.cacheData.user = user.user;
+    this.cacheData.id = user.id;
+    this.cacheData.accessToken = user.accessToken;
+    this.cacheData.refreshToken = user.refreshToken;
+    await this.setValue(this.cacheData);
+  }
+  getCurrentUser() {
+    const cacheData = this.cacheData;
+    return Promise.resolve(cacheData.user);
+  }
+  getCurrentUserList() {
+    return Promise.resolve(this.cacheData.loginUsers.filter((u) => u?.id));
+  }
+  getRefreshToken() {
+    const cacheData = this.cacheData;
+    return Promise.resolve(cacheData.refreshToken || "");
+  }
+  getAccessToken() {
+    const cacheData = this.cacheData;
+    return Promise.resolve(cacheData.accessToken || "");
+  }
+  async clearCurrentUser() {
+    const user = await this.getCurrentUser();
+    const has = this.cacheData.loginUsers.find((u) => u.id === user.id);
+    if (has) {
+      this.cacheData.loginUsers = this.cacheData?.loginUsers?.filter((u) => u?.id && u.id !== user.id);
+    }
+    this.cacheData.user = undefined;
+    this.cacheData.id = undefined;
+    this.cacheData.accessToken = undefined;
+    this.cacheData.refreshToken = undefined;
+    await this.setValue(this.cacheData);
+  }
+  async clearAll() {
+    this.cacheData.loginUsers = [];
+    this.cacheData.user = undefined;
+    this.cacheData.id = undefined;
+    this.cacheData.accessToken = undefined;
+    this.cacheData.refreshToken = undefined;
+    await this.setValue(this.cacheData);
+  }
+}
+
+// ../../node_modules/.pnpm/@kevisual+load@0.0.6/node_modules/@kevisual/load/dist/load.js
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+var eventemitter3 = { exports: {} };
+var hasRequiredEventemitter3;
+function requireEventemitter3() {
+  if (hasRequiredEventemitter3)
+    return eventemitter3.exports;
+  hasRequiredEventemitter3 = 1;
+  (function(module) {
+    var has = Object.prototype.hasOwnProperty, prefix = "~";
+    function Events() {}
+    if (Object.create) {
+      Events.prototype = Object.create(null);
+      if (!new Events().__proto__)
+        prefix = false;
+    }
+    function EE(fn, context, once) {
+      this.fn = fn;
+      this.context = context;
+      this.once = once || false;
+    }
+    function addListener(emitter, event, fn, context, once) {
+      if (typeof fn !== "function") {
+        throw new TypeError("The listener must be a function");
+      }
+      var listener = new EE(fn, context || emitter, once), evt = prefix ? prefix + event : event;
+      if (!emitter._events[evt])
+        emitter._events[evt] = listener, emitter._eventsCount++;
+      else if (!emitter._events[evt].fn)
+        emitter._events[evt].push(listener);
+      else
+        emitter._events[evt] = [emitter._events[evt], listener];
+      return emitter;
+    }
+    function clearEvent(emitter, evt) {
+      if (--emitter._eventsCount === 0)
+        emitter._events = new Events;
+      else
+        delete emitter._events[evt];
+    }
+    function EventEmitter2() {
+      this._events = new Events;
+      this._eventsCount = 0;
+    }
+    EventEmitter2.prototype.eventNames = function eventNames() {
+      var names = [], events, name;
+      if (this._eventsCount === 0)
+        return names;
+      for (name in events = this._events) {
+        if (has.call(events, name))
+          names.push(prefix ? name.slice(1) : name);
+      }
+      if (Object.getOwnPropertySymbols) {
+        return names.concat(Object.getOwnPropertySymbols(events));
+      }
+      return names;
+    };
+    EventEmitter2.prototype.listeners = function listeners(event) {
+      var evt = prefix ? prefix + event : event, handlers = this._events[evt];
+      if (!handlers)
+        return [];
+      if (handlers.fn)
+        return [handlers.fn];
+      for (var i = 0, l = handlers.length, ee = new Array(l);i < l; i++) {
+        ee[i] = handlers[i].fn;
+      }
+      return ee;
+    };
+    EventEmitter2.prototype.listenerCount = function listenerCount(event) {
+      var evt = prefix ? prefix + event : event, listeners = this._events[evt];
+      if (!listeners)
+        return 0;
+      if (listeners.fn)
+        return 1;
+      return listeners.length;
+    };
+    EventEmitter2.prototype.emit = function emit(event, a1, a2, a3, a4, a5) {
+      var evt = prefix ? prefix + event : event;
+      if (!this._events[evt])
+        return false;
+      var listeners = this._events[evt], len = arguments.length, args, i;
+      if (listeners.fn) {
+        if (listeners.once)
+          this.removeListener(event, listeners.fn, undefined, true);
+        switch (len) {
+          case 1:
+            return listeners.fn.call(listeners.context), true;
+          case 2:
+            return listeners.fn.call(listeners.context, a1), true;
+          case 3:
+            return listeners.fn.call(listeners.context, a1, a2), true;
+          case 4:
+            return listeners.fn.call(listeners.context, a1, a2, a3), true;
+          case 5:
+            return listeners.fn.call(listeners.context, a1, a2, a3, a4), true;
+          case 6:
+            return listeners.fn.call(listeners.context, a1, a2, a3, a4, a5), true;
+        }
+        for (i = 1, args = new Array(len - 1);i < len; i++) {
+          args[i - 1] = arguments[i];
+        }
+        listeners.fn.apply(listeners.context, args);
+      } else {
+        var length = listeners.length, j;
+        for (i = 0;i < length; i++) {
+          if (listeners[i].once)
+            this.removeListener(event, listeners[i].fn, undefined, true);
+          switch (len) {
+            case 1:
+              listeners[i].fn.call(listeners[i].context);
+              break;
+            case 2:
+              listeners[i].fn.call(listeners[i].context, a1);
+              break;
+            case 3:
+              listeners[i].fn.call(listeners[i].context, a1, a2);
+              break;
+            case 4:
+              listeners[i].fn.call(listeners[i].context, a1, a2, a3);
+              break;
+            default:
+              if (!args)
+                for (j = 1, args = new Array(len - 1);j < len; j++) {
+                  args[j - 1] = arguments[j];
+                }
+              listeners[i].fn.apply(listeners[i].context, args);
+          }
+        }
+      }
+      return true;
+    };
+    EventEmitter2.prototype.on = function on(event, fn, context) {
+      return addListener(this, event, fn, context, false);
+    };
+    EventEmitter2.prototype.once = function once(event, fn, context) {
+      return addListener(this, event, fn, context, true);
+    };
+    EventEmitter2.prototype.removeListener = function removeListener(event, fn, context, once) {
+      var evt = prefix ? prefix + event : event;
+      if (!this._events[evt])
+        return this;
+      if (!fn) {
+        clearEvent(this, evt);
+        return this;
+      }
+      var listeners = this._events[evt];
+      if (listeners.fn) {
+        if (listeners.fn === fn && (!once || listeners.once) && (!context || listeners.context === context)) {
+          clearEvent(this, evt);
+        }
+      } else {
+        for (var i = 0, events = [], length = listeners.length;i < length; i++) {
+          if (listeners[i].fn !== fn || once && !listeners[i].once || context && listeners[i].context !== context) {
+            events.push(listeners[i]);
+          }
+        }
+        if (events.length)
+          this._events[evt] = events.length === 1 ? events[0] : events;
+        else
+          clearEvent(this, evt);
+      }
+      return this;
+    };
+    EventEmitter2.prototype.removeAllListeners = function removeAllListeners(event) {
+      var evt;
+      if (event) {
+        evt = prefix ? prefix + event : event;
+        if (this._events[evt])
+          clearEvent(this, evt);
+      } else {
+        this._events = new Events;
+        this._eventsCount = 0;
+      }
+      return this;
+    };
+    EventEmitter2.prototype.off = EventEmitter2.prototype.removeListener;
+    EventEmitter2.prototype.addListener = EventEmitter2.prototype.on;
+    EventEmitter2.prefixed = prefix;
+    EventEmitter2.EventEmitter = EventEmitter2;
+    {
+      module.exports = EventEmitter2;
+    }
+  })(eventemitter3);
+  return eventemitter3.exports;
+}
+var eventemitter3Exports = requireEventemitter3();
+var EventEmitter2 = /* @__PURE__ */ getDefaultExportFromCjs(eventemitter3Exports);
+var reRunFn = (promiseOpts) => {
+  const timeout = promiseOpts.timeout || 5 * 60 * 1000;
+  const interval = promiseOpts.interval || 1000;
+  const checkSuccess = promiseOpts?.checkSuccess || (() => true);
+  const signal = promiseOpts.signal;
+  return new Promise(async (resolve, reject) => {
+    let intervalId;
+    let timeoutId = setTimeout(() => {
+      clearTimeout(intervalId);
+      resolve({
+        code: 500,
+        message: "timeout"
+      });
+    }, timeout);
+    const fn = promiseOpts.fn || (() => true);
+    const runFn = async () => {
+      if (signal?.aborted) {
+        clearInterval(intervalId);
+        clearTimeout(timeoutId);
+        return resolve({
+          code: 499,
+          message: "operation cancelled"
+        });
+      }
+      const res = await fn();
+      if (!!checkSuccess(res)) {
+        clearInterval(intervalId);
+        clearTimeout(timeoutId);
+        resolve({
+          code: 200,
+          data: res
+        });
+      } else {
+        setTimeout(() => {
+          runFn();
+        }, interval);
+      }
+    };
+    if (signal) {
+      signal.addEventListener("abort", () => {
+        clearInterval(intervalId);
+        clearTimeout(timeoutId);
+        resolve({
+          code: 499,
+          message: "operation cancelled"
+        });
+      });
+    }
+    runFn();
+  });
+};
+
+class BaseLoad {
+  modules = new Map;
+  event;
+  loading;
+  static reRunFn = reRunFn;
+  timeout = 5 * 60 * 1000;
+  constructor() {
+    this.event = new EventEmitter2;
+    this.loading = false;
+  }
+  listenKey(key, listenOpts) {
+    const timeout = listenOpts?.timeout ?? this.timeout;
+    return new Promise((resolve) => {
+      const timeoutId = setTimeout(() => {
+        this.event.removeListener(key, onEvent);
+        resolve({
+          code: 500,
+          message: "timeout"
+        });
+      }, timeout);
+      const onEvent = (error) => {
+        clearTimeout(timeoutId);
+        if (error) {
+          return resolve({
+            code: 500,
+            message: error
+          });
+        }
+        const data = this.modules.get(key);
+        if (data?.loadSuccessClear) {
+          this.remove(key);
+        }
+        resolve({
+          code: 200,
+          data: data?.modules
+        });
+      };
+      this.event.once(key, onEvent);
+    });
+  }
+  async hasLoaded(key, hasLoadOpts) {
+    if (!key) {
+      return {
+        code: 404,
+        message: "key is required"
+      };
+    }
+    const has = this.modules.has(key);
+    if (!has) {
+      const isExist = hasLoadOpts?.isExist ?? true;
+      const timeout = hasLoadOpts?.timeout ?? this.timeout;
+      if (isExist) {
+        return await this.listenKey(key, { timeout });
+      }
+      return {
+        code: 404
+      };
+    }
+    const data = this.modules.get(key);
+    if (data?.status === "loaded") {
+      return {
+        code: 200,
+        data: data.modules
+      };
+    }
+    if (data?.status === "loading") {
+      return await this.listenKey(key, { timeout: hasLoadOpts?.timeout ?? this.timeout });
+    }
+    if (data?.status === "error") {
+      return {
+        code: 500,
+        message: "load error"
+      };
+    }
+    if (data?.status === "cancel") {
+      return {
+        code: 499,
+        message: "operation cancelled"
+      };
+    }
+    return {
+      code: 404
+    };
+  }
+  async loadFn(loadContent, opts) {
+    const key = opts.key;
+    if (!key) {
+      return {
+        code: 404,
+        message: "key is required"
+      };
+    }
+    const newModule = {
+      key: opts.key,
+      status: "loading",
+      loading: true,
+      loadSuccessClear: opts.loadSuccessClear ?? true
+    };
+    let errorMessage = "";
+    try {
+      const isReRun = opts.isReRun ?? false;
+      let res;
+      if (!isReRun) {
+        this.modules.set(key, newModule);
+        res = await loadContent();
+      } else {
+        newModule.controller = new AbortController;
+        const signal = newModule.controller.signal;
+        this.modules.set(key, newModule);
+        const data = await reRunFn({
+          timeout: opts.timeout,
+          interval: opts.interval,
+          checkSuccess: opts.checkSuccess,
+          fn: loadContent,
+          signal
+        });
+        newModule.controller = null;
+        if (data.code === 499) {
+          newModule.status = "cancel";
+          return {
+            code: 499,
+            message: "operation cancelled"
+          };
+        }
+        if (data.code !== 200) {
+          throw new Error(data.message);
+        }
+        res = data.data;
+      }
+      newModule.modules = res;
+      newModule.status = "loaded";
+      return {
+        code: 200,
+        data: res
+      };
+    } catch (error) {
+      errorMessage = error.message;
+      newModule.status = "error";
+      return {
+        code: 500,
+        message: error
+      };
+    } finally {
+      newModule.loading = false;
+      this.modules.set(opts.key, newModule);
+      if (!errorMessage) {
+        this.event.emit(opts.key);
+      } else {
+        this.event.emit(opts.key, errorMessage);
+      }
+    }
+  }
+  async load(loadContent, opts) {
+    this.loading = true;
+    const key = opts.key;
+    if (!key) {
+      return {
+        code: 404,
+        message: "key is required"
+      };
+    }
+    if (opts?.force) {
+      this.remove(key);
+    }
+    const has = this.modules.has(key);
+    if (has) {
+      return await this.hasLoaded(key);
+    }
+    if (typeof loadContent === "function") {
+      return this.loadFn(loadContent, opts);
+    }
+    console.error("loadContent is not a function and not has loaded");
+  }
+  remove(key) {
+    const has = this.modules.has(key);
+    if (has) {
+      this.checkRemoveController(key);
+      this.modules.delete(key);
+    }
+  }
+  emitLoaded(key) {
+    this.checkRemoveController(key);
+    this.event.emit(key);
+  }
+  setModule(key, data, loadData) {
+    const newModule = {
+      key,
+      status: "loaded",
+      loading: false,
+      modules: data || {},
+      ...loadData
+    };
+    this.modules.set(key, newModule);
+    this.emitLoaded(key);
+    return newModule;
+  }
+  cancel(key) {
+    this.checkRemoveController(key);
+  }
+  checkRemoveController(key) {
+    const data = this.modules.get(key);
+    if (data?.controller) {
+      data.controller?.abort?.();
+      delete data.controller;
+      this.modules.set(key, data);
+    }
+  }
+}
+
+// ../../node_modules/.pnpm/@kevisual+api@0.0.8/node_modules/@kevisual/api/query/query-login/query-login.ts
+class QueryLogin2 extends BaseQuery {
+  cacheStore;
+  isBrowser;
+  load;
+  storage;
+  onLoad;
+  constructor(opts) {
+    super({
+      query: opts?.query || new Query
+    });
+    this.cacheStore = new LoginCacheStore2({ name: "login", cache: opts?.cache });
+    this.isBrowser = opts?.isBrowser ?? true;
+    this.init();
+    this.onLoad = opts?.onLoad;
+    this.storage = opts?.storage || localStorage;
+  }
+  setQuery(query2) {
+    this.query = query2;
+  }
+  async init() {
+    await this.cacheStore.init();
+    this.load = true;
+    this.onLoad?.();
+  }
+  async post(data, opts) {
+    try {
+      return this.query.post({ path: "user", ...data }, opts);
+    } catch (error) {
+      console.log("error", error);
+      return {
+        code: 400
+      };
+    }
+  }
+  async login(data) {
+    const res = await this.post({ key: "login", ...data });
+    if (res.code === 200) {
+      const { accessToken, refreshToken } = res?.data || {};
+      this.storage.setItem("token", accessToken || "");
+      await this.beforeSetLoginUser({ accessToken, refreshToken });
+    }
+    return res;
+  }
+  async loginByCode(data) {
+    const res = await this.post({ path: "sms", key: "login", data });
+    if (res.code === 200) {
+      const { accessToken, refreshToken } = res?.data || {};
+      this.storage.setItem("token", accessToken || "");
+      await this.beforeSetLoginUser({ accessToken, refreshToken });
+    }
+    return res;
+  }
+  async setLoginToken(token) {
+    const { accessToken, refreshToken } = token;
+    this.storage.setItem("token", accessToken || "");
+    await this.beforeSetLoginUser({ accessToken, refreshToken });
+  }
+  async loginByWechat(data) {
+    const res = await this.post({ path: "wx", key: "open-login", code: data.code });
+    if (res.code === 200) {
+      const { accessToken, refreshToken } = res?.data || {};
+      this.storage.setItem("token", accessToken || "");
+      await this.beforeSetLoginUser({ accessToken, refreshToken });
+    }
+    return res;
+  }
+  async checkWechat({ onSuccess, onError }) {
+    const url = new URL(window.location.href);
+    const code = url.searchParams.get("code");
+    const state = url.searchParams.get("state");
+    if (code && state) {
+      const res = await this.loginByWechat({ code });
+      if (res.code === 200) {
+        onSuccess?.(res.data);
+      } else {
+        onError?.(res);
+      }
+    }
+  }
+  async beforeSetLoginUser({ accessToken, refreshToken, check401 }) {
+    if (accessToken && refreshToken) {
+      const resUser = await this.getMe(accessToken, check401);
+      if (resUser.code === 200) {
+        const user = resUser.data;
+        if (user) {
+          this.cacheStore.setLoginUser({
+            user,
+            id: user.id,
+            accessToken,
+            refreshToken
+          });
+        } else {
+          console.error("登录失败");
+        }
+      }
+    }
+  }
+  async queryRefreshToken(refreshToken) {
+    const _refreshToken = refreshToken || this.cacheStore.getRefreshToken();
+    let data = { refreshToken: _refreshToken };
+    if (!_refreshToken) {
+      await this.cacheStore.clearCurrentUser();
+      return {
+        code: 401,
+        message: "请先登录",
+        data: {}
+      };
+    }
+    return this.post({ key: "refreshToken", data }, {
+      afterResponse: async (response, ctx) => {
+        setBaseResponse(response);
+        return response;
+      }
+    });
+  }
+  async afterCheck401ToRefreshToken(response, ctx, refetch) {
+    const that = this;
+    if (response?.code === 401) {
+      const hasRefreshToken = await that.cacheStore.getRefreshToken();
+      if (hasRefreshToken) {
+        const res = await that.queryRefreshToken(hasRefreshToken);
+        if (res.code === 200) {
+          const { accessToken, refreshToken } = res?.data || {};
+          that.storage.setItem("token", accessToken || "");
+          await that.beforeSetLoginUser({ accessToken, refreshToken, check401: false });
+          if (refetch && ctx && ctx.req && ctx.req.url && ctx.fetch) {
+            await new Promise((resolve) => setTimeout(resolve, 1500));
+            const url = ctx.req?.url;
+            const body = ctx.req?.body;
+            const headers = ctx.req?.headers;
+            const res2 = await ctx.fetch(url, {
+              method: "POST",
+              body,
+              headers: { ...headers, Authorization: `Bearer ${accessToken}` }
+            });
+            setBaseResponse(res2);
+            return res2;
+          }
+        } else {
+          that.storage.removeItem("token");
+          await that.cacheStore.clearCurrentUser();
+        }
+        return res;
+      }
+    }
+    return response;
+  }
+  async run401Action(response, ctx, opts) {
+    const that = this;
+    const refetch = opts?.refetch ?? false;
+    if (response?.code === 401) {
+      if (that.query.stop === true) {
+        return { code: 500, success: false, message: "refresh token loading..." };
+      }
+      that.query.stop = true;
+      const res = await that.afterCheck401ToRefreshToken(response, ctx, refetch);
+      that.query.stop = false;
+      opts?.afterCheck?.(res);
+      if (res.code === 401) {
+        opts?.afterAlso401?.(res);
+      }
+      return res;
+    } else {
+      return response;
+    }
+  }
+  async getMe(token, check401 = true) {
+    const _token = token || this.storage.getItem("token");
+    const that = this;
+    return that.post({ key: "me" }, {
+      beforeRequest: async (config) => {
+        if (config.headers) {
+          config.headers["Authorization"] = `Bearer ${_token}`;
+        }
+        if (!_token) {
+          return false;
+        }
+        return config;
+      },
+      afterResponse: async (response, ctx) => {
+        if (response?.code === 401 && check401 && !token) {
+          return await that.afterCheck401ToRefreshToken(response, ctx);
+        }
+        return response;
+      }
+    });
+  }
+  async checkLocalUser() {
+    const user = await this.cacheStore.getCurrentUser();
+    if (user) {
+      return user;
+    }
+    return null;
+  }
+  async checkLocalToken() {
+    const token = this.storage.getItem("token");
+    return !!token;
+  }
+  async getToken() {
+    const token = this.storage.getItem("token");
+    return token || "";
+  }
+  async beforeRequest(opts = {}) {
+    const token = this.storage.getItem("token");
+    if (token) {
+      opts.headers = { ...opts.headers, Authorization: `Bearer ${token}` };
+    }
+    return opts;
+  }
+  async postSwitchUser(username) {
+    return this.post({ key: "switchCheck", data: { username } });
+  }
+  async switchUser(username) {
+    const localUserList = await this.cacheStore.getCurrentUserList();
+    const user = localUserList.find((userItem) => userItem.user.username === username);
+    if (user) {
+      this.storage.setItem("token", user.accessToken || "");
+      await this.beforeSetLoginUser({ accessToken: user.accessToken, refreshToken: user.refreshToken });
+      return {
+        code: 200,
+        data: {
+          accessToken: user.accessToken,
+          refreshToken: user.refreshToken
+        },
+        success: true,
+        message: "切换用户成功"
+      };
+    }
+    const res = await this.postSwitchUser(username);
+    if (res.code === 200) {
+      const { accessToken, refreshToken } = res?.data || {};
+      this.storage.setItem("token", accessToken || "");
+      await this.beforeSetLoginUser({ accessToken, refreshToken });
+    }
+    return res;
+  }
+  async logout() {
+    this.storage.removeItem("token");
+    const users = await this.cacheStore.getCurrentUserList();
+    const tokens = users.map((user) => {
+      return user?.accessToken;
+    }).filter(Boolean);
+    this.cacheStore.delValue();
+    return this.post({ key: "logout", data: { tokens } });
+  }
+  async hasUser(username) {
+    const that = this;
+    return this.post({
+      path: "org",
+      key: "hasUser",
+      data: {
+        username
+      }
+    }, {
+      afterResponse: async (response, ctx) => {
+        if (response?.code === 401) {
+          const res = await that.afterCheck401ToRefreshToken(response, ctx, true);
+          return res;
+        }
+        return response;
+      }
+    });
+  }
+  async checkLoginStatus(token) {
+    const res = await this.post({
+      path: "user",
+      key: "checkLoginStatus",
+      loginToken: token
+    });
+    if (res.code === 200) {
+      const accessToken = res.data?.accessToken;
+      this.storage.setItem("token", accessToken || "");
+      await this.beforeSetLoginUser({ accessToken, refreshToken: res.data?.refreshToken });
+      return res;
+    }
+    return false;
+  }
+  loginWithWeb(baseURL, { MD5, jsonwebtoken }) {
+    const randomId = Math.random().toString(36).substring(2, 15);
+    const timestamp = Date.now();
+    const tokenSecret = "xiao" + randomId;
+    let sign = "";
+    if (MD5) {
+      sign = MD5(`${tokenSecret}${timestamp}`).toString();
+    }
+    let token = "";
+    if (jsonwebtoken) {
+      token = jsonwebtoken.sign({ randomId, timestamp, sign }, tokenSecret, {
+        expiresIn: 60 * 10
+      });
+    } else {
+      token = tokenSecret;
+    }
+    const url = `${baseURL}/api/router?path=user&key=webLogin&p&loginToken=${token}&sign=${sign}&randomId=${randomId}`;
+    return { url, token, tokenSecret };
+  }
+  async pollLoginStatus(data) {
+    const token = data.token;
+    const load = new BaseLoad;
+    load.load(async () => {
+      const res2 = await this.checkLoginStatus(token);
+      if (res2.code === 500) {
+        load.cancel("check-login-status");
+      }
+      return res2;
+    }, {
+      key: "check-login-status",
+      isReRun: true,
+      checkSuccess: (data2) => {
+        return data2?.code === 200;
+      }
+    });
+    const res = await load.hasLoaded("check-login-status", {
+      timeout: 60 * 3 * 1000
+    });
+    if (res.code === 200 && res.data?.code === 200) {
+      try {
+        console.log("网页登录成功");
+        return true;
+      } catch (error) {
+        console.log("登录失败", error);
+        return false;
+      }
+    }
+    console.log("登录失败", res);
+    return false;
+  }
+}
+
+// ../../node_modules/.pnpm/@kevisual+api@0.0.8/node_modules/@kevisual/api/query/query-login/query-login-browser.ts
+class QueryLoginBrowser2 extends QueryLogin2 {
+  constructor(opts) {
+    super({
+      ...opts,
+      cache: new MyCache("login")
+    });
+  }
+}
+
 // src/modules/login-handle.ts
 var message = createMessage();
 var redirectHome = () => {
@@ -4196,10 +5084,27 @@ var loginHandle = async (opts) => {
     case "wechat":
       await loginByWeChat(data);
       break;
+    case "web":
+      await loginByWeb(data);
+      break;
     default:
       console.warn("未知的登录方式:", loginMethod);
   }
 };
+var loginByWeb = async (data) => {
+  const url = new URL("https://kevisual.cn/api/router");
+  const query2 = new Query({ url: "https://kevisual.cn/api/router" });
+  const login = new QueryLoginBrowser2({ query: query2 });
+  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("网页登录失败，请重试");
+  }
+};
 var loginByPassword = async (data) => {
   console.log("使用用户名密码登录:", data);
   let needLogin = true;
@@ -4507,15 +5412,15 @@ var useCreateLoginQRCode = (el) => {
 
 // ../../node_modules/.pnpm/@kevisual+context@0.0.4/node_modules/@kevisual/context/dist/app.js
 var isBrowser = typeof window !== "undefined" && typeof window.document !== "undefined";
-function getDefaultExportFromCjs(x) {
+function getDefaultExportFromCjs2(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
-var eventemitter3 = { exports: {} };
-var hasRequiredEventemitter3;
-function requireEventemitter3() {
-  if (hasRequiredEventemitter3)
-    return eventemitter3.exports;
-  hasRequiredEventemitter3 = 1;
+var eventemitter32 = { exports: {} };
+var hasRequiredEventemitter32;
+function requireEventemitter32() {
+  if (hasRequiredEventemitter32)
+    return eventemitter32.exports;
+  hasRequiredEventemitter32 = 1;
   (function(module) {
     var has = Object.prototype.hasOwnProperty, prefix = "~";
     function Events() {}
@@ -4548,11 +5453,11 @@ function requireEventemitter3() {
       else
         delete emitter._events[evt];
     }
-    function EventEmitter2() {
+    function EventEmitter3() {
       this._events = new Events;
       this._eventsCount = 0;
     }
-    EventEmitter2.prototype.eventNames = function eventNames() {
+    EventEmitter3.prototype.eventNames = function eventNames() {
       var names = [], events, name;
       if (this._eventsCount === 0)
         return names;
@@ -4565,7 +5470,7 @@ function requireEventemitter3() {
       }
       return names;
     };
-    EventEmitter2.prototype.listeners = function listeners(event) {
+    EventEmitter3.prototype.listeners = function listeners(event) {
       var evt = prefix ? prefix + event : event, handlers = this._events[evt];
       if (!handlers)
         return [];
@@ -4576,7 +5481,7 @@ function requireEventemitter3() {
       }
       return ee;
     };
-    EventEmitter2.prototype.listenerCount = function listenerCount(event) {
+    EventEmitter3.prototype.listenerCount = function listenerCount(event) {
       var evt = prefix ? prefix + event : event, listeners = this._events[evt];
       if (!listeners)
         return 0;
@@ -4584,7 +5489,7 @@ function requireEventemitter3() {
         return 1;
       return listeners.length;
     };
-    EventEmitter2.prototype.emit = function emit(event, a1, a2, a3, a4, a5) {
+    EventEmitter3.prototype.emit = function emit(event, a1, a2, a3, a4, a5) {
       var evt = prefix ? prefix + event : event;
       if (!this._events[evt])
         return false;
@@ -4639,13 +5544,13 @@ function requireEventemitter3() {
       }
       return true;
     };
-    EventEmitter2.prototype.on = function on(event, fn, context) {
+    EventEmitter3.prototype.on = function on(event, fn, context) {
       return addListener(this, event, fn, context, false);
     };
-    EventEmitter2.prototype.once = function once(event, fn, context) {
+    EventEmitter3.prototype.once = function once(event, fn, context) {
       return addListener(this, event, fn, context, true);
     };
-    EventEmitter2.prototype.removeListener = function removeListener(event, fn, context, once) {
+    EventEmitter3.prototype.removeListener = function removeListener(event, fn, context, once) {
       var evt = prefix ? prefix + event : event;
       if (!this._events[evt])
         return this;
@@ -4671,7 +5576,7 @@ function requireEventemitter3() {
       }
       return this;
     };
-    EventEmitter2.prototype.removeAllListeners = function removeAllListeners(event) {
+    EventEmitter3.prototype.removeAllListeners = function removeAllListeners(event) {
       var evt;
       if (event) {
         evt = prefix ? prefix + event : event;
@@ -4683,19 +5588,19 @@ function requireEventemitter3() {
       }
       return this;
     };
-    EventEmitter2.prototype.off = EventEmitter2.prototype.removeListener;
-    EventEmitter2.prototype.addListener = EventEmitter2.prototype.on;
-    EventEmitter2.prefixed = prefix;
-    EventEmitter2.EventEmitter = EventEmitter2;
+    EventEmitter3.prototype.off = EventEmitter3.prototype.removeListener;
+    EventEmitter3.prototype.addListener = EventEmitter3.prototype.on;
+    EventEmitter3.prefixed = prefix;
+    EventEmitter3.EventEmitter = EventEmitter3;
     {
-      module.exports = EventEmitter2;
+      module.exports = EventEmitter3;
     }
-  })(eventemitter3);
-  return eventemitter3.exports;
+  })(eventemitter32);
+  return eventemitter32.exports;
 }
-var eventemitter3Exports = requireEventemitter3();
-var EventEmitter2 = /* @__PURE__ */ getDefaultExportFromCjs(eventemitter3Exports);
-var reRunFn = (promiseOpts) => {
+var eventemitter3Exports2 = requireEventemitter32();
+var EventEmitter3 = /* @__PURE__ */ getDefaultExportFromCjs2(eventemitter3Exports2);
+var reRunFn2 = (promiseOpts) => {
   const timeout = promiseOpts.timeout || 5 * 60 * 1000;
   const interval = promiseOpts.interval || 1000;
   const checkSuccess = promiseOpts?.checkSuccess || (() => true);
@@ -4747,14 +5652,14 @@ var reRunFn = (promiseOpts) => {
   });
 };
 
-class BaseLoad {
+class BaseLoad2 {
   modules = new Map;
   event;
   loading;
-  static reRunFn = reRunFn;
+  static reRunFn = reRunFn2;
   timeout = 5 * 60 * 1000;
   constructor() {
-    this.event = new EventEmitter2;
+    this.event = new EventEmitter3;
     this.loading = false;
   }
   listenKey(key, listenOpts) {
@@ -4856,7 +5761,7 @@ class BaseLoad {
         newModule.controller = new AbortController;
         const signal = newModule.controller.signal;
         this.modules.set(key, newModule);
-        const data = await reRunFn({
+        const data = await reRunFn2({
           timeout: opts.timeout,
           interval: opts.interval,
           checkSuccess: opts.checkSuccess,
@@ -4992,7 +5897,7 @@ var useEnvKey = (key, init, initKey = "config") => {
     return _env[key];
   }
   if (key) {
-    const baseLoad = new BaseLoad;
+    const baseLoad = new BaseLoad2;
     const voidFn = async () => {
       return _env[key];
     };
@@ -5051,7 +5956,7 @@ class InitEnv {
     gt.useContextKey = useContextKey;
     gt.use = use;
     gt.webEnv = { useConfigKey, useContextKey, use };
-    load && (gt.Load = BaseLoad);
+    load && (gt.Load = BaseLoad2);
   }
 }
 InitEnv.init();
@@ -5063,26 +5968,29 @@ var wxmpSvg = `<svg t="1764510467010" class="icon" viewBox="0 0 1024 1024" versi
 var 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>`;
 var 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>`;
 var 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>`;
+var 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>`;
 var icons = {
   pwd,
+  web,
   phone,
   wxmpSvg,
   wxOpenSvg
 };
 var DefaultLoginMethods = [
   { 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" }
 ];
-var LoginMethods = ["password", "phone", "wechat", "wechat-mp", "wechat-mp-ticket"];
+var LoginMethods = ["password", "web", "phone", "wechat", "wechat-mp", "wechat-mp-ticket"];
 var getLoginMethodByDomain = () => {
   let domain = window.location.host;
   let methods = [];
-  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":
@@ -5091,11 +5999,11 @@ var getLoginMethodByDomain = () => {
     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));
@@ -5196,6 +6104,8 @@ class KvLogin extends HTMLElement {
           username: username?.value || "",
           password: password?.value || ""
         };
+      case "web":
+        return {};
       case "phone":
         const phone2 = this.shadowRoot.querySelector("#phone");
         const code = this.shadowRoot.querySelector("#code");
@@ -5242,6 +6152,14 @@ class KvLogin extends HTMLElement {
       </form>
     `;
   }
+  renderWebForm() {
+    return html`
+      <div class="web-login">
+        <button type="button" class="refresh-button" @click=${this.handleLogin.bind(this)}>点击登录</button>
+        <slot></slot>
+      </div>
+    `;
+  }
   renderPhoneForm() {
     return html`
       <form id="loginForm" class="login-form">
@@ -5331,6 +6249,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":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kevisual/kv-login",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "",
   "main": "src/main.ts",
   "scripts": {
@@ -19,7 +19,7 @@
   ],
   "author": "abearxiong <xiongxiao@xiongxiao.me> (https://www.xiongxiao.me)",
   "license": "MIT",
-  "packageManager": "pnpm@10.24.0",
+  "packageManager": "pnpm@10.26.2",
   "publishConfig": {
     "access": "public"
   },
@@ -27,7 +27,8 @@
   "dependencies": {
     "@kevisual/context": "^0.0.4",
     "@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,6 +37,7 @@
   },
   "types": "./types/index.d.ts",
   "devDependencies": {
+    "@kevisual/api": "^0.0.8",
     "@types/bun": "^1.3.5"
   }
 }

package/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 

package/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))
@@ -161,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
@@ -210,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">
@@ -308,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':