diff --git a/packages/kv-login/package.json b/packages/kv-login/package.json
index 49f7283..859a45d 100644
--- a/packages/kv-login/package.json
+++ b/packages/kv-login/package.json
@@ -1,6 +1,6 @@
{
"name": "@kevisual/kv-login",
- "version": "0.0.2",
+ "version": "0.0.3",
"description": "",
"main": "src/main.ts",
"scripts": {
diff --git a/packages/kv-login/readme.md b/packages/kv-login/readme.md
new file mode 100644
index 0000000..7b934c3
--- /dev/null
+++ b/packages/kv-login/readme.md
@@ -0,0 +1,7 @@
+# 可视化登录组件
+
+## 主题色
+
+黑白
+
+
diff --git a/packages/kv-login/src/pages/kv-login.ts b/packages/kv-login/src/pages/kv-login.ts
index b57fec0..ff847a3 100644
--- a/packages/kv-login/src/pages/kv-login.ts
+++ b/packages/kv-login/src/pages/kv-login.ts
@@ -1,4 +1,5 @@
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 { setWxerwma } from '../modules/wx/ws-login.ts';
import { useCreateLoginQRCode } from '../modules/wx-mp/qr.ts';
@@ -6,17 +7,29 @@ export const WX_MP_APP_ID = "wxff97d569b1db16b6";
interface LoginMethod {
id: LoginMethods
name: string
- icon: string
+ icon: any
appid?: string
}
+const wxmpSvg = ``
+const wxOpenSvg = ``
+const phone = ``
+const pwd = ``
+
+const icons: any = {
+ pwd,
+ phone,
+ wxmpSvg,
+ wxOpenSvg
+}
const DefaultLoginMethods: LoginMethod[] = [
- { id: 'password', name: '密码登录', icon: '🔒' },
- { id: 'wechat', name: '微信登录', icon: '💬', appid: "wx9378885c8390e09b" },
- { id: 'wechat-mp', name: '微信公众号登录', icon: '💬', appid: WX_MP_APP_ID },
- { id: 'wechat-mp-ticket', name: '微信公众号登录', icon: '💬' },
- { id: 'phone', name: '手机号登录', icon: '📱' }
+ { id: 'password', name: '密码登录', icon: 'pwd' },
+ { 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' }
]
type LoginMethods = 'password' | 'phone' | 'wechat' | 'wechat-mp' | 'wechat-mp-ticket';
+
const getLoginMethodByDomain = (): LoginMethod[] => {
const domain = window.location.hostname
let methods: LoginMethods[] = []
@@ -284,6 +297,22 @@ class KvLogin extends HTMLElement {
render() {
if (!this.shadowRoot) return
+ const renderIcon = (icon: any) => {
+ // 如果是emoji字符，直接返回
+ if (typeof icon === 'string' && !icons[icon]) {
+ return html`${icon}`
+ }
+ // 如果是SVG引用，从icons对象获取
+ if (typeof icon === 'string' && icons[icon]) {
+ return html`${unsafeHTML(icons[icon])}`
+ }
+ // 如果直接是SVG内容
+ if (typeof icon === 'string' && (icon.includes('${unsafeHTML(icon)}`
+ }
+ // 默认情况
+ return html`${icon}`
+ }
const template = html`