web-components/kv-login
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: web-components:7db3f1f6dcb52d1f41de106d36c51906073a300f
Branches Tags
web-components:main
...
compare: web-components:main
Branches Tags
web-components:main

4 Commits
7db3f1f6dc ... main

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
11 changed files with 628 additions and 388 deletions
Expand all files Collapse all files

60
index.html
View File

@@ -5,12 +5,27 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KvMessage Demo</title> <title>KvMessage Demo</title>
<script type="module" src="./src/main.ts"></script> <script type="module" src="./pages/web.ts"></script>
<style> <style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body { body {
margin: 0; margin: 0;
padding: 20px; padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 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 { .demo-container {
@@ -19,6 +34,8 @@
align-items: center; align-items: center;
gap: 20px; gap: 20px;
padding: 40px 20px; padding: 40px 20px;
width: 100%;
max-width: 500px;
} }
.button-group { .button-group {
@@ -30,42 +47,69 @@
.demo-button { .demo-button {
padding: 10px 20px; padding: 10px 20px;
border: none; border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 6px; border-radius: 8px;
cursor: pointer; cursor: pointer;
font-size: 14px; 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 { .demo-button.success {
background: #52c41a; background: #52c41a;
color: white; color: white;
border-color: #52c41a;
} }
.demo-button.success:hover { .demo-button.success:hover {
background: #389e0d; background: #389e0d;
border-color: #389e0d;
box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
} }
.demo-button.error { .demo-button.error {
background: #ff4d4f; background: #ff4d4f;
color: white; color: white;
border-color: #ff4d4f;
} }
.demo-button.error:hover { .demo-button.error:hover {
background: #cf1322; background: #cf1322;
border-color: #cf1322;
box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
} }
.demo-button.loading { .demo-button.loading {
background: #1890ff; background: #1890ff;
color: white; color: white;
border-color: #1890ff;
} }
.demo-button.loading:hover { .demo-button.loading:hover {
background: #096dd9; background: #096dd9;
border-color: #096dd9;
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
} }
.login-section { .login-section {
text-align: center; 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> </style>
</head> </head>
@@ -73,9 +117,9 @@
<body> <body>
<div class="demo-container"> <div class="demo-container">
<div class="login-section"> <div class="login-section">
<h2>登录组件</h2> <h2>登录</h2>
<kv-login method="password,wechat,wechat-mp"> <!-- <kv-login method="wechat,password"></kv-login> -->
</kv-login> <kv-login></kv-login>
</div> </div>
</div> </div>
</body> </body>

28
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "@kevisual/kv-login", "name": "@kevisual/kv-login",
"version": "0.1.1", "version": "0.1.13",
"description": "", "description": "",
"main": "src/main.ts", "main": "src/main.ts",
"scripts": { "scripts": {
@@ -9,25 +9,27 @@
"postbuild": "dts -i src/main.ts -o app.d.ts", "postbuild": "dts -i src/main.ts -o app.d.ts",
"build:test": "vite build", "build:test": "vite build",
"prepub": "rm -rf ./dist && pnpm run build:test", "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": [], "keywords": [],
"files": [
"types",
"src",
"dist"
],
"author": "abearxiong <xiongxiao@xiongxiao.me> (https://www.xiongxiao.me)", "author": "abearxiong <xiongxiao@xiongxiao.me> (https://www.xiongxiao.me)",
"license": "MIT", "license": "MIT",
"packageManager": "pnpm@10.26.0", "packageManager": "pnpm@10.28.2",
"publishConfig": { "publishConfig": {
"access": "public" "access": "public"
}, },
"type": "module", "type": "module",
"files": [
"types",
"dist"
],
"dependencies": { "dependencies": {
"@kevisual/cache": "^0.0.5",
"@kevisual/context": "^0.0.4", "@kevisual/context": "^0.0.4",
"@kevisual/query": "^0.0.32", "@kevisual/query": "^0.0.39",
"@kevisual/query-login": "^0.0.7", "crypto-js": "^4.2.0",
"lit-html": "^3.3.1", "lit-html": "^3.3.2",
"qrcode": "^1.5.4" "qrcode": "^1.5.4"
}, },
"exports": { "exports": {
@@ -36,8 +38,8 @@
}, },
"types": "./types/index.d.ts", "types": "./types/index.d.ts",
"devDependencies": { "devDependencies": {
"@types/bun": "^1.3.4", "@kevisual/api": "^0.0.44",
"@types/qrcode": "^1.5.6", "@types/bun": "^1.3.8",
"vite": "^7.3.0" "vite": "^7.3.1"
} }
} }

20
pages/web.ts Normal file
View File

@@ -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');
}
})

696
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

21
readme.md
View File

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

9
src/main.ts
View File

@@ -1,4 +1,11 @@
import './pages/kv-login' import './pages/kv-login'
import './pages/kv-message' 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';

61
src/modules/login-handle.ts
View File

@@ -2,9 +2,11 @@ import { query } from './query.ts';
import { createMessage } from '../pages/kv-message.ts'; import { createMessage } from '../pages/kv-message.ts';
import { WX_MP_APP_ID } from '../pages/kv-login.ts'; import { WX_MP_APP_ID } from '../pages/kv-login.ts';
import { emit } from './mitt.ts'; import { emit } from './mitt.ts';
import { Query } from '@kevisual/query';
import { QueryLoginBrowser } from '@kevisual/api/login'
export const message = createMessage(); export const message = createMessage();
type LoginOpts = { type LoginOpts = {
loginMethod: 'password' | 'phone' | 'wechat' | 'wechat-mp' | 'wechat-mp-ticket', loginMethod: 'password' | 'web' | 'phone' | 'wechat' | 'wechat-mp' | 'wechat-mp-ticket',
data: any, data: any,
el: HTMLElement el: HTMLElement
} }
@@ -40,10 +42,28 @@ export const loginHandle = async (opts: LoginOpts) => {
case 'wechat': case 'wechat':
await loginByWeChat(data) await loginByWeChat(data)
break break
case 'web':
await loginByWeb(data)
break
default: default:
console.warn('未知的登录方式:', loginMethod) 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 * @param data
@@ -93,11 +113,13 @@ const loginByWeChatMp = async (data: { wechatMpCode: string }) => {
console.log('使用微信公众号登录:', data) console.log('使用微信公众号登录:', data)
} }
const clearCode = () => { export const clearCode = () => {
const url = new URL(window.location.href); const url = new URL(window.location.href);
// 清理 URL 中的 code 参数 // 清理 URL 中的 code 参数
url.searchParams.delete('code'); url.searchParams.delete('code');
url.searchParams.delete('state'); url.searchParams.delete('state');
url.searchParams.delete('user-check');
url.searchParams.delete('redirect');
window.history.replaceState({}, document.title, url.toString()); window.history.replaceState({}, document.title, url.toString());
} }
export const checkWechat = async () => { export const checkWechat = async () => {
@@ -146,6 +168,41 @@ export const checkMpWechat = async () => {
closePage(); 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 isWechat = () => {
const ua = navigator.userAgent.toLowerCase(); const ua = navigator.userAgent.toLowerCase();
return /micromessenger/i.test(ua); return /micromessenger/i.test(ua);

7
src/modules/query.ts
View File

@@ -1,10 +1,11 @@
import { Query } from '@kevisual/query' 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, query: queryBase,
}) })
export const query = queryLogin;

93
src/pages/kv-login.ts
View File

@@ -5,6 +5,11 @@ import { setWxerwma } from '../modules/wx/ws-login.ts';
import { useCreateLoginQRCode } from '../modules/wx-mp/qr.ts'; import { useCreateLoginQRCode } from '../modules/wx-mp/qr.ts';
import { eventEmitter } from '../modules/mitt.ts'; import { eventEmitter } from '../modules/mitt.ts';
import { useContextKey } from '@kevisual/context' 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 loginEmitter = useContextKey('login-emitter', eventEmitter);
export const WX_MP_APP_ID = "wxff97d569b1db16b6"; export const WX_MP_APP_ID = "wxff97d569b1db16b6";
interface LoginMethod { 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 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 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 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 = { const icons: any = {
pwd, pwd,
web,
phone, phone,
wxmpSvg, wxmpSvg,
wxOpenSvg wxOpenSvg
} }
const DefaultLoginMethods: LoginMethod[] = [ const DefaultLoginMethods: LoginMethod[] = [
{ id: 'password', name: '密码登录', icon: 'pwd' },
{ id: 'wechat', name: '微信登录', icon: 'wxmpSvg', appid: "wx9378885c8390e09b" }, { 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', name: '微信公众号', icon: 'wxOpenSvg', appid: WX_MP_APP_ID },
{ id: 'wechat-mp-ticket', name: '微信公众号', icon: 'wxOpenSvg' }, { id: 'wechat-mp-ticket', name: '微信公众号', icon: 'wxOpenSvg' },
{ id: 'phone', name: '手机号登录', icon: 'phone' } { id: 'phone', name: '手机号登录', icon: 'phone' }
] ]
const LoginMethods = ['password', 'phone', 'wechat', 'wechat-mp', 'wechat-mp-ticket'] as const; const LoginMethods = ['password', 'web', 'phone', 'wechat', 'wechat-mp', 'wechat-mp-ticket'] as const;
type LoginMethods = 'password' | 'phone' | 'wechat' | 'wechat-mp' | 'wechat-mp-ticket'; type LoginMethods = 'password' | 'web' | 'phone' | 'wechat' | 'wechat-mp' | 'wechat-mp-ticket';
const getLoginMethodByDomain = (): LoginMethod[] => { const getLoginMethodByDomain = (): LoginMethod[] => {
let domain = window.location.host let domain = window.location.host
let methods: LoginMethods[] = [] let methods: LoginMethods[] = []
const has51015 = domain.includes('51015'); const has51 = domain.includes('localhost') && (domain.endsWith('51515') || domain.endsWith('51015'));
if (has51015) { if (has51) {
domain = 'localhost:51015' domain = 'localhost'
} }
switch (domain) { switch (domain) {
case 'kevisual.xiongxiao.me': case 'kevisual.xiongxiao.me':
@@ -48,11 +55,11 @@ const getLoginMethodByDomain = (): LoginMethod[] => {
case 'kevisual.cn': case 'kevisual.cn':
methods = ['password', 'wechat-mp-ticket', 'wechat',] methods = ['password', 'wechat-mp-ticket', 'wechat',]
break; break;
case 'localhost:51015': case 'localhost':
methods = ['password'] methods = ['password', 'web']
break break
default: default:
methods = ['password', 'phone', 'wechat', 'wechat-mp', 'wechat-mp-ticket'] methods = ['password', 'web', 'phone', 'wechat', 'wechat-mp', 'wechat-mp-ticket']
break; break;
} }
return DefaultLoginMethods.filter(method => methods.includes(method.id)) return DefaultLoginMethods.filter(method => methods.includes(method.id))
@@ -60,10 +67,13 @@ const getLoginMethodByDomain = (): LoginMethod[] => {
const getLoginMethod = (methods: LoginMethods[]): LoginMethod[] => { const getLoginMethod = (methods: LoginMethods[]): LoginMethod[] => {
return DefaultLoginMethods.filter(method => methods.includes(method.id)) 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 { class KvLogin extends HTMLElement {
private selectedMethod: LoginMethods = 'password' private selectedMethod: LoginMethods = 'password'
private loginMethods: LoginMethod[] = getLoginMethodByDomain(); private loginMethods: LoginMethod[] = [];
setLoginMethods(methods: LoginMethod[]) { setLoginMethods(methods: LoginMethod[]) {
this.loginMethods = methods this.loginMethods = methods
this.render() this.render()
@@ -74,24 +84,37 @@ class KvLogin extends HTMLElement {
connectedCallback() { connectedCallback() {
this.attachShadow({ mode: 'open' }) this.attachShadow({ mode: 'open' })
this.render()
this.bindEvents() this.bindEvents()
checkWechat() checkWechat()
const method = this.getAttribute('method'); const method = this.getAttribute('method');
let id = this.id;
if (!id) {
id = randomId(6);
this.id = id;
}
let methodSetFlag = false;
if (method) { if (method) {
const methods = method ? method.split(',') as LoginMethods[] : []; const methods = method ? method.split(',') as LoginMethods[] : [];
if (methods.length > 0) { 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) { if (loginMethods.length > 0) {
this.loginMethods = getLoginMethod(loginMethods) methodSetFlag = true;
this.selectedMethod = loginMethods[0] this.loginMethods = loginMethods;
this.setLoginMethods(this.loginMethods); this.selectedMethod = loginMethods[0].id;
return;
} }
} }
}
if (!methodSetFlag) {
this.loginMethods = getLoginMethodByDomain(); this.loginMethods = getLoginMethodByDomain();
this.selectedMethod = this.loginMethods[0].id; this.selectedMethod = this.loginMethods[0].id;
} }
this.render()
} }
#clearTimer: any = null; #clearTimer: any = null;
private selectLoginMethod(methodId: LoginMethods) { private selectLoginMethod(methodId: LoginMethods) {
@@ -134,6 +157,8 @@ class KvLogin extends HTMLElement {
private handleLogin() { private handleLogin() {
const formData = this.getFormData() const formData = this.getFormData()
// console.log('登录方式:', this.selectedMethod)
// console.log('登录数据:', formData)
loginHandle({ loginHandle({
loginMethod: this.selectedMethod, loginMethod: this.selectedMethod,
data: formData, data: formData,
@@ -160,7 +185,8 @@ class KvLogin extends HTMLElement {
username: username?.value || '', username: username?.value || '',
password: password?.value || '' password: password?.value || ''
} }
case 'web':
return {}
case 'phone': case 'phone':
const phone = this.shadowRoot.querySelector('#phone') as HTMLInputElement const phone = this.shadowRoot.querySelector('#phone') as HTMLInputElement
const code = this.shadowRoot.querySelector('#code') as HTMLInputElement const code = this.shadowRoot.querySelector('#code') as HTMLInputElement
@@ -209,7 +235,14 @@ class KvLogin extends HTMLElement {
</form> </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() { private renderPhoneForm() {
return html` return html`
<form id="loginForm" class="login-form"> <form id="loginForm" class="login-form">
@@ -241,6 +274,14 @@ class KvLogin extends HTMLElement {
} }
private renderWechatForm() { 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` return html`
<div class="wechat-login"> <div class="wechat-login">
<slot></slot> <slot></slot>
@@ -307,6 +348,8 @@ class KvLogin extends HTMLElement {
switch (this.selectedMethod) { switch (this.selectedMethod) {
case 'password': case 'password':
return this.renderPasswordForm() return this.renderPasswordForm()
case 'web':
return this.renderWebForm()
case 'phone': case 'phone':
return this.renderPhoneForm() return this.renderPhoneForm()
case 'wechat': case 'wechat':
@@ -320,18 +363,10 @@ class KvLogin extends HTMLElement {
return this.renderPasswordForm() 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() { render() {
if (!this.shadowRoot) return if (!this.shadowRoot) return
this.createWeixinEl();
const renderIcon = (icon: any) => { const renderIcon = (icon: any) => {
// 如果是emoji字符，直接返回 // 如果是emoji字符，直接返回
if (typeof icon === 'string' && !icons[icon]) { if (typeof icon === 'string' && !icons[icon]) {

3
vite.config.ts
View File

@@ -1,8 +1,9 @@
import { defineConfig } from 'vite'; import { defineConfig } from 'vite';
import { resolve } from 'path';
const idDev = process.env.NODE_ENV === 'development'; const idDev = process.env.NODE_ENV === 'development';
export default defineConfig({ export default defineConfig({
base: idDev ? '/' : '/root/kv-login-test/', base: idDev ? '/' : '/root/login/',
server: { server: {
proxy: { proxy: {
'/api': { '/api': {

18
web.html
View File

@@ -4,17 +4,9 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KvMessage Demo</title> <title>登录页面</title>
<script type="importmap">
{ <script type="module" src="../pages/web.ts"> </script>
"imports": {
"@kevisual/kv-login": "https://esm.kevisual.cn/@kevisual/kv-login"
}
}
</script>
<script type="module">
import '@kevisual/kv-login';
</script>
<style> <style>
body { body {
margin: 0; margin: 0;
@@ -83,9 +75,7 @@
<div class="demo-container"> <div class="demo-container">
<div class="login-section"> <div class="login-section">
<h2>登录组件</h2> <h2>登录组件</h2>
<kv-login method="password"> <kv-login></kv-login>
<div id="weixinLogin"></div>
</kv-login>
</div> </div>
</div> </div>
</body> </body>