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

update

Browse Source
This commit is contained in:
熊潇
2025-12-15 22:35:48 +08:00
commit 9bace74072
20 changed files with 2768 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
.cnb.yml Normal file
View File

@@ -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

2
.gitignore vendored Normal file
View File

@@ -0,0 +1,2 @@
node_modules
dist

2
.npmrc Normal file
View File

@@ -0,0 +1,2 @@
//npm.xiongxiao.me/:_authToken=${ME_NPM_TOKEN}
//registry.npmjs.org/:_authToken=${NPM_TOKEN}

15
bun.config.ts Normal file
View File

@@ -0,0 +1,15 @@
import { build } from 'bun';
await build({
entrypoints: ["./src/main.ts"],
outdir: './dist',
target: 'browser',
format: 'esm',
naming: {
entry: 'app.js',
},
minify: false,
sourcemap: false,
});
console.log('✅ Build complete: dist/app.js');

84
index.html Normal file
View File

@@ -0,0 +1,84 @@
<!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="module" src="./src/main.ts"></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>
<div id="weixinLogin"></div>
</kv-login>
</div>
</div>
</body>
</html>

39
package.json Normal file
View File

@@ -0,0 +1,39 @@
{
"name": "@kevisual/kv-login",
"version": "0.0.8",
"description": "",
"main": "src/main.ts",
"scripts": {
"dev": "vite",
"build": "bun bun.config.ts",
"postbuild": "dts -i src/main.ts -o app.d.ts",
"build:test": "vite build",
"prepub": "rm -rf ./dist && pnpm run build:test",
"pub": "ev deploy ./dist -k kv-login-test -v 0.0.6 -u -y yes"
},
"keywords": [],
"author": "abearxiong <xiongxiao@xiongxiao.me> (https://www.xiongxiao.me)",
"license": "MIT",
"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"
},
"exports": {
".": "./dist/app.js",
"./types": "./types/index.d.ts"
},
"types": "./types/index.d.ts",
"devDependencies": {
"@types/bun": "^1.3.4",
"@types/qrcode": "^1.5.6",
"vite": "^7.3.0"
}
}

934
pnpm-lock.yaml generated Normal file
View File

@@ -0,0 +1,934 @@
lockfileVersion: '9.0'
settings:
autoInstallPeers: true
excludeLinksFromLockfile: false
importers:
.:
dependencies:
'@kevisual/context':
specifier: ^0.0.4
version: 0.0.4
'@kevisual/query':
specifier: ^0.0.32
version: 0.0.32
'@kevisual/query-login':
specifier: ^0.0.7
version: 0.0.7(@kevisual/query@0.0.32)
lit-html:
specifier: ^3.3.1
version: 3.3.1
qrcode:
specifier: ^1.5.4
version: 1.5.4
devDependencies:
'@types/bun':
specifier: ^1.3.4
version: 1.3.4
'@types/qrcode':
specifier: ^1.5.6
version: 1.5.6
vite:
specifier: ^7.3.0
version: 7.3.0(@types/node@25.0.2)
packages:
'@esbuild/aix-ppc64@0.27.1':
resolution: {integrity: sha512-HHB50pdsBX6k47S4u5g/CaLjqS3qwaOVE5ILsq64jyzgMhLuCuZ8rGzM9yhsAjfjkbgUPMzZEPa7DAp7yz6vuA==}
engines: {node: '>=18'}
cpu: [ppc64]
os: [aix]
'@esbuild/android-arm64@0.27.1':
resolution: {integrity: sha512-45fuKmAJpxnQWixOGCrS+ro4Uvb4Re9+UTieUY2f8AEc+t7d4AaZ6eUJ3Hva7dtrxAAWHtlEFsXFMAgNnGU9uQ==}
engines: {node: '>=18'}
cpu: [arm64]
os: [android]
'@esbuild/android-arm@0.27.1':
resolution: {integrity: sha512-kFqa6/UcaTbGm/NncN9kzVOODjhZW8e+FRdSeypWe6j33gzclHtwlANs26JrupOntlcWmB0u8+8HZo8s7thHvg==}
engines: {node: '>=18'}
cpu: [arm]
os: [android]
'@esbuild/android-x64@0.27.1':
resolution: {integrity: sha512-LBEpOz0BsgMEeHgenf5aqmn/lLNTFXVfoWMUox8CtWWYK9X4jmQzWjoGoNb8lmAYml/tQ/Ysvm8q7szu7BoxRQ==}
engines: {node: '>=18'}
cpu: [x64]
os: [android]
'@esbuild/darwin-arm64@0.27.1':
resolution: {integrity: sha512-veg7fL8eMSCVKL7IW4pxb54QERtedFDfY/ASrumK/SbFsXnRazxY4YykN/THYqFnFwJ0aVjiUrVG2PwcdAEqQQ==}
engines: {node: '>=18'}
cpu: [arm64]
os: [darwin]
'@esbuild/darwin-x64@0.27.1':
resolution: {integrity: sha512-+3ELd+nTzhfWb07Vol7EZ+5PTbJ/u74nC6iv4/lwIU99Ip5uuY6QoIf0Hn4m2HoV0qcnRivN3KSqc+FyCHjoVQ==}
engines: {node: '>=18'}
cpu: [x64]
os: [darwin]
'@esbuild/freebsd-arm64@0.27.1':
resolution: {integrity: sha512-/8Rfgns4XD9XOSXlzUDepG8PX+AVWHliYlUkFI3K3GB6tqbdjYqdhcb4BKRd7C0BhZSoaCxhv8kTcBrcZWP+xg==}
engines: {node: '>=18'}
cpu: [arm64]
os: [freebsd]
'@esbuild/freebsd-x64@0.27.1':
resolution: {integrity: sha512-GITpD8dK9C+r+5yRT/UKVT36h/DQLOHdwGVwwoHidlnA168oD3uxA878XloXebK4Ul3gDBBIvEdL7go9gCUFzQ==}
engines: {node: '>=18'}
cpu: [x64]
os: [freebsd]
'@esbuild/linux-arm64@0.27.1':
resolution: {integrity: sha512-W9//kCrh/6in9rWIBdKaMtuTTzNj6jSeG/haWBADqLLa9P8O5YSRDzgD5y9QBok4AYlzS6ARHifAb75V6G670Q==}
engines: {node: '>=18'}
cpu: [arm64]
os: [linux]
'@esbuild/linux-arm@0.27.1':
resolution: {integrity: sha512-ieMID0JRZY/ZeCrsFQ3Y3NlHNCqIhTprJfDgSB3/lv5jJZ8FX3hqPyXWhe+gvS5ARMBJ242PM+VNz/ctNj//eA==}
engines: {node: '>=18'}
cpu: [arm]
os: [linux]
'@esbuild/linux-ia32@0.27.1':
resolution: {integrity: sha512-VIUV4z8GD8rtSVMfAj1aXFahsi/+tcoXXNYmXgzISL+KB381vbSTNdeZHHHIYqFyXcoEhu9n5cT+05tRv13rlw==}
engines: {node: '>=18'}
cpu: [ia32]
os: [linux]
'@esbuild/linux-loong64@0.27.1':
resolution: {integrity: sha512-l4rfiiJRN7sTNI//ff65zJ9z8U+k6zcCg0LALU5iEWzY+a1mVZ8iWC1k5EsNKThZ7XCQ6YWtsZ8EWYm7r1UEsg==}
engines: {node: '>=18'}
cpu: [loong64]
os: [linux]
'@esbuild/linux-mips64el@0.27.1':
resolution: {integrity: sha512-U0bEuAOLvO/DWFdygTHWY8C067FXz+UbzKgxYhXC0fDieFa0kDIra1FAhsAARRJbvEyso8aAqvPdNxzWuStBnA==}
engines: {node: '>=18'}
cpu: [mips64el]
os: [linux]
'@esbuild/linux-ppc64@0.27.1':
resolution: {integrity: sha512-NzdQ/Xwu6vPSf/GkdmRNsOfIeSGnh7muundsWItmBsVpMoNPVpM61qNzAVY3pZ1glzzAxLR40UyYM23eaDDbYQ==}
engines: {node: '>=18'}
cpu: [ppc64]
os: [linux]
'@esbuild/linux-riscv64@0.27.1':
resolution: {integrity: sha512-7zlw8p3IApcsN7mFw0O1Z1PyEk6PlKMu18roImfl3iQHTnr/yAfYv6s4hXPidbDoI2Q0pW+5xeoM4eTCC0UdrQ==}
engines: {node: '>=18'}
cpu: [riscv64]
os: [linux]
'@esbuild/linux-s390x@0.27.1':
resolution: {integrity: sha512-cGj5wli+G+nkVQdZo3+7FDKC25Uh4ZVwOAK6A06Hsvgr8WqBBuOy/1s+PUEd/6Je+vjfm6stX0kmib5b/O2Ykw==}
engines: {node: '>=18'}
cpu: [s390x]
os: [linux]
'@esbuild/linux-x64@0.27.1':
resolution: {integrity: sha512-z3H/HYI9MM0HTv3hQZ81f+AKb+yEoCRlUby1F80vbQ5XdzEMyY/9iNlAmhqiBKw4MJXwfgsh7ERGEOhrM1niMA==}
engines: {node: '>=18'}
cpu: [x64]
os: [linux]
'@esbuild/netbsd-arm64@0.27.1':
resolution: {integrity: sha512-wzC24DxAvk8Em01YmVXyjl96Mr+ecTPyOuADAvjGg+fyBpGmxmcr2E5ttf7Im8D0sXZihpxzO1isus8MdjMCXQ==}
engines: {node: '>=18'}
cpu: [arm64]
os: [netbsd]
'@esbuild/netbsd-x64@0.27.1':
resolution: {integrity: sha512-1YQ8ybGi2yIXswu6eNzJsrYIGFpnlzEWRl6iR5gMgmsrR0FcNoV1m9k9sc3PuP5rUBLshOZylc9nqSgymI+TYg==}
engines: {node: '>=18'}
cpu: [x64]
os: [netbsd]
'@esbuild/openbsd-arm64@0.27.1':
resolution: {integrity: sha512-5Z+DzLCrq5wmU7RDaMDe2DVXMRm2tTDvX2KU14JJVBN2CT/qov7XVix85QoJqHltpvAOZUAc3ndU56HSMWrv8g==}
engines: {node: '>=18'}
cpu: [arm64]
os: [openbsd]
'@esbuild/openbsd-x64@0.27.1':
resolution: {integrity: sha512-Q73ENzIdPF5jap4wqLtsfh8YbYSZ8Q0wnxplOlZUOyZy7B4ZKW8DXGWgTCZmF8VWD7Tciwv5F4NsRf6vYlZtqg==}
engines: {node: '>=18'}
cpu: [x64]
os: [openbsd]
'@esbuild/openharmony-arm64@0.27.1':
resolution: {integrity: sha512-ajbHrGM/XiK+sXM0JzEbJAen+0E+JMQZ2l4RR4VFwvV9JEERx+oxtgkpoKv1SevhjavK2z2ReHk32pjzktWbGg==}
engines: {node: '>=18'}
cpu: [arm64]
os: [openharmony]
'@esbuild/sunos-x64@0.27.1':
resolution: {integrity: sha512-IPUW+y4VIjuDVn+OMzHc5FV4GubIwPnsz6ubkvN8cuhEqH81NovB53IUlrlBkPMEPxvNnf79MGBoz8rZ2iW8HA==}
engines: {node: '>=18'}
cpu: [x64]
os: [sunos]
'@esbuild/win32-arm64@0.27.1':
resolution: {integrity: sha512-RIVRWiljWA6CdVu8zkWcRmGP7iRRIIwvhDKem8UMBjPql2TXM5PkDVvvrzMtj1V+WFPB4K7zkIGM7VzRtFkjdg==}
engines: {node: '>=18'}
cpu: [arm64]
os: [win32]
'@esbuild/win32-ia32@0.27.1':
resolution: {integrity: sha512-2BR5M8CPbptC1AK5JbJT1fWrHLvejwZidKx3UMSF0ecHMa+smhi16drIrCEggkgviBwLYd5nwrFLSl5Kho96RQ==}
engines: {node: '>=18'}
cpu: [ia32]
os: [win32]
'@esbuild/win32-x64@0.27.1':
resolution: {integrity: sha512-d5X6RMYv6taIymSk8JBP+nxv8DQAMY6A51GPgusqLdK9wBz5wWIXy1KjTck6HnjE9hqJzJRdk+1p/t5soSbCtw==}
engines: {node: '>=18'}
cpu: [x64]
os: [win32]
'@kevisual/cache@0.0.3':
resolution: {integrity: sha512-BWEck69KYL96/ywjYVkML974RHjDJTj2ITQND1zFPR+hlBV1H1p55QZgSYRJCObg3EAV1S9Zic/fR2T4pfe8yg==}
'@kevisual/context@0.0.4':
resolution: {integrity: sha512-HJeLeZQLU+7tCluSfOyvkgKLs0HjCZrdJlZgEgKRSa8XTwZfMAUt6J7qZTbrZAHBlPtX68EPu/PI8JMCeu3WAQ==}
'@kevisual/query-login@0.0.7':
resolution: {integrity: sha512-oOyPIz337cdTt7WncFj7Wr7nxUHh0pBB6KSAJlas+lQiWBPwQEZhpEd7YciydCRlMc9IJMcZRV1Bw3qgy8FFqQ==}
peerDependencies:
'@kevisual/query': ^0
'@kevisual/query@0.0.32':
resolution: {integrity: sha512-9WN9cjmwSW8I5A0SqITdts9oxlLBGdPP7kJ8vwrxkaQteHS9FzxKuMBJxZzGKZdyte/zJDvdrE+lMf254BGbbg==}
'@rollup/rollup-android-arm-eabi@4.53.4':
resolution: {integrity: sha512-PWU3Y92H4DD0bOqorEPp1Y0tbzwAurFmIYpjcObv5axGVOtcTlB0b2UKMd2echo08MgN7jO8WQZSSysvfisFSQ==}
cpu: [arm]
os: [android]
'@rollup/rollup-android-arm64@4.53.4':
resolution: {integrity: sha512-Gw0/DuVm3rGsqhMGYkSOXXIx20cC3kTlivZeuaGt4gEgILivykNyBWxeUV5Cf2tDA2nPLah26vq3emlRrWVbng==}
cpu: [arm64]
os: [android]
'@rollup/rollup-darwin-arm64@4.53.4':
resolution: {integrity: sha512-+w06QvXsgzKwdVg5qRLZpTHh1bigHZIqoIUPtiqh05ZiJVUQ6ymOxaPkXTvRPRLH88575ZCRSRM3PwIoNma01Q==}
cpu: [arm64]
os: [darwin]
'@rollup/rollup-darwin-x64@4.53.4':
resolution: {integrity: sha512-EB4Na9G2GsrRNRNFPuxfwvDRDUwQEzJPpiK1vo2zMVhEeufZ1k7J1bKnT0JYDfnPC7RNZ2H5YNQhW6/p2QKATw==}
cpu: [x64]
os: [darwin]
'@rollup/rollup-freebsd-arm64@4.53.4':
resolution: {integrity: sha512-bldA8XEqPcs6OYdknoTMaGhjytnwQ0NClSPpWpmufOuGPN5dDmvIa32FygC2gneKK4A1oSx86V1l55hyUWUYFQ==}
cpu: [arm64]
os: [freebsd]
'@rollup/rollup-freebsd-x64@4.53.4':
resolution: {integrity: sha512-3T8GPjH6mixCd0YPn0bXtcuSXi1Lj+15Ujw2CEb7dd24j9thcKscCf88IV7n76WaAdorOzAgSSbuVRg4C8V8Qw==}
cpu: [x64]
os: [freebsd]
'@rollup/rollup-linux-arm-gnueabihf@4.53.4':
resolution: {integrity: sha512-UPMMNeC4LXW7ZSHxeP3Edv09aLsFUMaD1TSVW6n1CWMECnUIJMFFB7+XC2lZTdPtvB36tYC0cJWc86mzSsaviw==}
cpu: [arm]
os: [linux]
'@rollup/rollup-linux-arm-musleabihf@4.53.4':
resolution: {integrity: sha512-H8uwlV0otHs5Q7WAMSoyvjV9DJPiy5nJ/xnHolY0QptLPjaSsuX7tw+SPIfiYH6cnVx3fe4EWFafo6gH6ekZKA==}
cpu: [arm]
os: [linux]
'@rollup/rollup-linux-arm64-gnu@4.53.4':
resolution: {integrity: sha512-BLRwSRwICXz0TXkbIbqJ1ibK+/dSBpTJqDClF61GWIrxTXZWQE78ROeIhgl5MjVs4B4gSLPCFeD4xML9vbzvCQ==}
cpu: [arm64]
os: [linux]
'@rollup/rollup-linux-arm64-musl@4.53.4':
resolution: {integrity: sha512-6bySEjOTbmVcPJAywjpGLckK793A0TJWSbIa0sVwtVGfe/Nz6gOWHOwkshUIAp9j7wg2WKcA4Snu7Y1nUZyQew==}
cpu: [arm64]
os: [linux]
'@rollup/rollup-linux-loong64-gnu@4.53.4':
resolution: {integrity: sha512-U0ow3bXYJZ5MIbchVusxEycBw7bO6C2u5UvD31i5IMTrnt2p4Fh4ZbHSdc/31TScIJQYHwxbj05BpevB3201ug==}
cpu: [loong64]
os: [linux]
'@rollup/rollup-linux-ppc64-gnu@4.53.4':
resolution: {integrity: sha512-iujDk07ZNwGLVn0YIWM80SFN039bHZHCdCCuX9nyx3Jsa2d9V/0Y32F+YadzwbvDxhSeVo9zefkoPnXEImnM5w==}
cpu: [ppc64]
os: [linux]
'@rollup/rollup-linux-riscv64-gnu@4.53.4':
resolution: {integrity: sha512-MUtAktiOUSu+AXBpx1fkuG/Bi5rhlorGs3lw5QeJ2X3ziEGAq7vFNdWVde6XGaVqi0LGSvugwjoxSNJfHFTC0g==}
cpu: [riscv64]
os: [linux]
'@rollup/rollup-linux-riscv64-musl@4.53.4':
resolution: {integrity: sha512-btm35eAbDfPtcFEgaXCI5l3c2WXyzwiE8pArhd66SDtoLWmgK5/M7CUxmUglkwtniPzwvWioBKKl6IXLbPf2sQ==}
cpu: [riscv64]
os: [linux]
'@rollup/rollup-linux-s390x-gnu@4.53.4':
resolution: {integrity: sha512-uJlhKE9ccUTCUlK+HUz/80cVtx2RayadC5ldDrrDUFaJK0SNb8/cCmC9RhBhIWuZ71Nqj4Uoa9+xljKWRogdhA==}
cpu: [s390x]
os: [linux]
'@rollup/rollup-linux-x64-gnu@4.53.4':
resolution: {integrity: sha512-jjEMkzvASQBbzzlzf4os7nzSBd/cvPrpqXCUOqoeCh1dQ4BP3RZCJk8XBeik4MUln3m+8LeTJcY54C/u8wb3DQ==}
cpu: [x64]
os: [linux]
'@rollup/rollup-linux-x64-musl@4.53.4':
resolution: {integrity: sha512-lu90KG06NNH19shC5rBPkrh6mrTpq5kviFylPBXQVpdEu0yzb0mDgyxLr6XdcGdBIQTH/UAhDJnL+APZTBu1aQ==}
cpu: [x64]
os: [linux]
'@rollup/rollup-openharmony-arm64@4.53.4':
resolution: {integrity: sha512-dFDcmLwsUzhAm/dn0+dMOQZoONVYBtgik0VuY/d5IJUUb787L3Ko/ibvTvddqhb3RaB7vFEozYevHN4ox22R/w==}
cpu: [arm64]
os: [openharmony]
'@rollup/rollup-win32-arm64-msvc@4.53.4':
resolution: {integrity: sha512-WvUpUAWmUxZKtRnQWpRKnLW2DEO8HB/l8z6oFFMNuHndMzFTJEXzaYJ5ZAmzNw0L21QQJZsUQFt2oPf3ykAD/w==}
cpu: [arm64]
os: [win32]
'@rollup/rollup-win32-ia32-msvc@4.53.4':
resolution: {integrity: sha512-JGbeF2/FDU0x2OLySw/jgvkwWUo05BSiJK0dtuI4LyuXbz3wKiC1xHhLB1Tqm5VU6ZZDmAorj45r/IgWNWku5g==}
cpu: [ia32]
os: [win32]
'@rollup/rollup-win32-x64-gnu@4.53.4':
resolution: {integrity: sha512-zuuC7AyxLWLubP+mlUwEyR8M1ixW1ERNPHJfXm8x7eQNP4Pzkd7hS3qBuKBR70VRiQ04Kw8FNfRMF5TNxuZq2g==}
cpu: [x64]
os: [win32]
'@rollup/rollup-win32-x64-msvc@4.53.4':
resolution: {integrity: sha512-Sbx45u/Lbb5RyptSbX7/3deP+/lzEmZ0BTSHxwxN/IMOZDZf8S0AGo0hJD5n/LQssxb5Z3B4og4P2X6Dd8acCA==}
cpu: [x64]
os: [win32]
'@types/bun@1.3.4':
resolution: {integrity: sha512-EEPTKXHP+zKGPkhRLv+HI0UEX8/o+65hqARxLy8Ov5rIxMBPNTjeZww00CIihrIQGEQBYg+0roO5qOnS/7boGA==}
'@types/estree@1.0.8':
resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
'@types/node@25.0.2':
resolution: {integrity: sha512-gWEkeiyYE4vqjON/+Obqcoeffmk0NF15WSBwSs7zwVA2bAbTaE0SJ7P0WNGoJn8uE7fiaV5a7dKYIJriEqOrmA==}
'@types/qrcode@1.5.6':
resolution: {integrity: sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==}
'@types/trusted-types@2.0.7':
resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
ansi-regex@5.0.1:
resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
engines: {node: '>=8'}
ansi-styles@4.3.0:
resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
engines: {node: '>=8'}
bun-types@1.3.4:
resolution: {integrity: sha512-5ua817+BZPZOlNaRgGBpZJOSAQ9RQ17pkwPD0yR7CfJg+r8DgIILByFifDTa+IPDDxzf5VNhtNlcKqFzDgJvlQ==}
camelcase@5.3.1:
resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
engines: {node: '>=6'}
cliui@6.0.0:
resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
color-convert@2.0.1:
resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
engines: {node: '>=7.0.0'}
color-name@1.1.4:
resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
decamelize@1.2.0:
resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
engines: {node: '>=0.10.0'}
dijkstrajs@1.0.3:
resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
dotenv@17.2.3:
resolution: {integrity: sha512-JVUnt+DUIzu87TABbhPmNfVdBDt18BLOWjMUFJMSi/Qqg7NTYtabbvSNJGOJ7afbRuv9D/lngizHtP7QyLQ+9w==}
engines: {node: '>=12'}
emoji-regex@8.0.0:
resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
esbuild@0.27.1:
resolution: {integrity: sha512-yY35KZckJJuVVPXpvjgxiCuVEJT67F6zDeVTv4rizyPrfGBUpZQsvmxnN+C371c2esD/hNMjj4tpBhuueLN7aA==}
engines: {node: '>=18'}
hasBin: true
fdir@6.5.0:
resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
engines: {node: '>=12.0.0'}
peerDependencies:
picomatch: ^3 || ^4
peerDependenciesMeta:
picomatch:
optional: true
find-up@4.1.0:
resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
engines: {node: '>=8'}
fsevents@2.3.3:
resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
os: [darwin]
get-caller-file@2.0.5:
resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
engines: {node: 6.* || 8.* || >= 10.*}
idb-keyval@6.2.2:
resolution: {integrity: sha512-yjD9nARJ/jb1g+CvD0tlhUHOrJ9Sy0P8T9MF3YaLlHnSRpwPfpTX0XIvpmw3gAJUmEu3FiICLBDPXVwyEvrleg==}
is-fullwidth-code-point@3.0.0:
resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
engines: {node: '>=8'}
lit-html@3.3.1:
resolution: {integrity: sha512-S9hbyDu/vs1qNrithiNyeyv64c9yqiW9l+DBgI18fL+MTvOtWoFR0FWiyq1TxaYef5wNlpEmzlXoBlZEO+WjoA==}
locate-path@5.0.0:
resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
engines: {node: '>=8'}
nanoid@3.3.11:
resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
hasBin: true
p-limit@2.3.0:
resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
engines: {node: '>=6'}
p-locate@4.1.0:
resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
engines: {node: '>=8'}
p-try@2.2.0:
resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
engines: {node: '>=6'}
path-exists@4.0.0:
resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
engines: {node: '>=8'}
picocolors@1.1.1:
resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
picomatch@4.0.3:
resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
engines: {node: '>=12'}
pngjs@5.0.0:
resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
engines: {node: '>=10.13.0'}
postcss@8.5.6:
resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
engines: {node: ^10 || ^12 || >=14}
qrcode@1.5.4:
resolution: {integrity: sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==}
engines: {node: '>=10.13.0'}
hasBin: true
require-directory@2.1.1:
resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
engines: {node: '>=0.10.0'}
require-main-filename@2.0.0:
resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
rollup@4.53.4:
resolution: {integrity: sha512-YpXaaArg0MvrnJpvduEDYIp7uGOqKXbH9NsHGQ6SxKCOsNAjZF018MmxefFUulVP2KLtiGw1UvZbr+/ekjvlDg==}
engines: {node: '>=18.0.0', npm: '>=8.0.0'}
hasBin: true
set-blocking@2.0.0:
resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
source-map-js@1.2.1:
resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
engines: {node: '>=0.10.0'}
string-width@4.2.3:
resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
engines: {node: '>=8'}
strip-ansi@6.0.1:
resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
engines: {node: '>=8'}
tinyglobby@0.2.15:
resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
engines: {node: '>=12.0.0'}
undici-types@7.16.0:
resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
vite@7.3.0:
resolution: {integrity: sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==}
engines: {node: ^20.19.0 || >=22.12.0}
hasBin: true
peerDependencies:
'@types/node': ^20.19.0 || >=22.12.0
jiti: '>=1.21.0'
less: ^4.0.0
lightningcss: ^1.21.0
sass: ^1.70.0
sass-embedded: ^1.70.0
stylus: '>=0.54.8'
sugarss: ^5.0.0
terser: ^5.16.0
tsx: ^4.8.1
yaml: ^2.4.2
peerDependenciesMeta:
'@types/node':
optional: true
jiti:
optional: true
less:
optional: true
lightningcss:
optional: true
sass:
optional: true
sass-embedded:
optional: true
stylus:
optional: true
sugarss:
optional: true
terser:
optional: true
tsx:
optional: true
yaml:
optional: true
which-module@2.0.1:
resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
wrap-ansi@6.2.0:
resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
engines: {node: '>=8'}
y18n@4.0.3:
resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
yargs-parser@18.1.3:
resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
engines: {node: '>=6'}
yargs@15.4.1:
resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
engines: {node: '>=8'}
snapshots:
'@esbuild/aix-ppc64@0.27.1':
optional: true
'@esbuild/android-arm64@0.27.1':
optional: true
'@esbuild/android-arm@0.27.1':
optional: true
'@esbuild/android-x64@0.27.1':
optional: true
'@esbuild/darwin-arm64@0.27.1':
optional: true
'@esbuild/darwin-x64@0.27.1':
optional: true
'@esbuild/freebsd-arm64@0.27.1':
optional: true
'@esbuild/freebsd-x64@0.27.1':
optional: true
'@esbuild/linux-arm64@0.27.1':
optional: true
'@esbuild/linux-arm@0.27.1':
optional: true
'@esbuild/linux-ia32@0.27.1':
optional: true
'@esbuild/linux-loong64@0.27.1':
optional: true
'@esbuild/linux-mips64el@0.27.1':
optional: true
'@esbuild/linux-ppc64@0.27.1':
optional: true
'@esbuild/linux-riscv64@0.27.1':
optional: true
'@esbuild/linux-s390x@0.27.1':
optional: true
'@esbuild/linux-x64@0.27.1':
optional: true
'@esbuild/netbsd-arm64@0.27.1':
optional: true
'@esbuild/netbsd-x64@0.27.1':
optional: true
'@esbuild/openbsd-arm64@0.27.1':
optional: true
'@esbuild/openbsd-x64@0.27.1':
optional: true
'@esbuild/openharmony-arm64@0.27.1':
optional: true
'@esbuild/sunos-x64@0.27.1':
optional: true
'@esbuild/win32-arm64@0.27.1':
optional: true
'@esbuild/win32-ia32@0.27.1':
optional: true
'@esbuild/win32-x64@0.27.1':
optional: true
'@kevisual/cache@0.0.3':
dependencies:
idb-keyval: 6.2.2
'@kevisual/context@0.0.4': {}
'@kevisual/query-login@0.0.7(@kevisual/query@0.0.32)':
dependencies:
'@kevisual/cache': 0.0.3
'@kevisual/query': 0.0.32
dotenv: 17.2.3
'@kevisual/query@0.0.32': {}
'@rollup/rollup-android-arm-eabi@4.53.4':
optional: true
'@rollup/rollup-android-arm64@4.53.4':
optional: true
'@rollup/rollup-darwin-arm64@4.53.4':
optional: true
'@rollup/rollup-darwin-x64@4.53.4':
optional: true
'@rollup/rollup-freebsd-arm64@4.53.4':
optional: true
'@rollup/rollup-freebsd-x64@4.53.4':
optional: true
'@rollup/rollup-linux-arm-gnueabihf@4.53.4':
optional: true
'@rollup/rollup-linux-arm-musleabihf@4.53.4':
optional: true
'@rollup/rollup-linux-arm64-gnu@4.53.4':
optional: true
'@rollup/rollup-linux-arm64-musl@4.53.4':
optional: true
'@rollup/rollup-linux-loong64-gnu@4.53.4':
optional: true
'@rollup/rollup-linux-ppc64-gnu@4.53.4':
optional: true
'@rollup/rollup-linux-riscv64-gnu@4.53.4':
optional: true
'@rollup/rollup-linux-riscv64-musl@4.53.4':
optional: true
'@rollup/rollup-linux-s390x-gnu@4.53.4':
optional: true
'@rollup/rollup-linux-x64-gnu@4.53.4':
optional: true
'@rollup/rollup-linux-x64-musl@4.53.4':
optional: true
'@rollup/rollup-openharmony-arm64@4.53.4':
optional: true
'@rollup/rollup-win32-arm64-msvc@4.53.4':
optional: true
'@rollup/rollup-win32-ia32-msvc@4.53.4':
optional: true
'@rollup/rollup-win32-x64-gnu@4.53.4':
optional: true
'@rollup/rollup-win32-x64-msvc@4.53.4':
optional: true
'@types/bun@1.3.4':
dependencies:
bun-types: 1.3.4
'@types/estree@1.0.8': {}
'@types/node@25.0.2':
dependencies:
undici-types: 7.16.0
'@types/qrcode@1.5.6':
dependencies:
'@types/node': 25.0.2
'@types/trusted-types@2.0.7': {}
ansi-regex@5.0.1: {}
ansi-styles@4.3.0:
dependencies:
color-convert: 2.0.1
bun-types@1.3.4:
dependencies:
'@types/node': 25.0.2
camelcase@5.3.1: {}
cliui@6.0.0:
dependencies:
string-width: 4.2.3
strip-ansi: 6.0.1
wrap-ansi: 6.2.0
color-convert@2.0.1:
dependencies:
color-name: 1.1.4
color-name@1.1.4: {}
decamelize@1.2.0: {}
dijkstrajs@1.0.3: {}
dotenv@17.2.3: {}
emoji-regex@8.0.0: {}
esbuild@0.27.1:
optionalDependencies:
'@esbuild/aix-ppc64': 0.27.1
'@esbuild/android-arm': 0.27.1
'@esbuild/android-arm64': 0.27.1
'@esbuild/android-x64': 0.27.1
'@esbuild/darwin-arm64': 0.27.1
'@esbuild/darwin-x64': 0.27.1
'@esbuild/freebsd-arm64': 0.27.1
'@esbuild/freebsd-x64': 0.27.1
'@esbuild/linux-arm': 0.27.1
'@esbuild/linux-arm64': 0.27.1
'@esbuild/linux-ia32': 0.27.1
'@esbuild/linux-loong64': 0.27.1
'@esbuild/linux-mips64el': 0.27.1
'@esbuild/linux-ppc64': 0.27.1
'@esbuild/linux-riscv64': 0.27.1
'@esbuild/linux-s390x': 0.27.1
'@esbuild/linux-x64': 0.27.1
'@esbuild/netbsd-arm64': 0.27.1
'@esbuild/netbsd-x64': 0.27.1
'@esbuild/openbsd-arm64': 0.27.1
'@esbuild/openbsd-x64': 0.27.1
'@esbuild/openharmony-arm64': 0.27.1
'@esbuild/sunos-x64': 0.27.1
'@esbuild/win32-arm64': 0.27.1
'@esbuild/win32-ia32': 0.27.1
'@esbuild/win32-x64': 0.27.1
fdir@6.5.0(picomatch@4.0.3):
optionalDependencies:
picomatch: 4.0.3
find-up@4.1.0:
dependencies:
locate-path: 5.0.0
path-exists: 4.0.0
fsevents@2.3.3:
optional: true
get-caller-file@2.0.5: {}
idb-keyval@6.2.2: {}
is-fullwidth-code-point@3.0.0: {}
lit-html@3.3.1:
dependencies:
'@types/trusted-types': 2.0.7
locate-path@5.0.0:
dependencies:
p-locate: 4.1.0
nanoid@3.3.11: {}
p-limit@2.3.0:
dependencies:
p-try: 2.2.0
p-locate@4.1.0:
dependencies:
p-limit: 2.3.0
p-try@2.2.0: {}
path-exists@4.0.0: {}
picocolors@1.1.1: {}
picomatch@4.0.3: {}
pngjs@5.0.0: {}
postcss@8.5.6:
dependencies:
nanoid: 3.3.11
picocolors: 1.1.1
source-map-js: 1.2.1
qrcode@1.5.4:
dependencies:
dijkstrajs: 1.0.3
pngjs: 5.0.0
yargs: 15.4.1
require-directory@2.1.1: {}
require-main-filename@2.0.0: {}
rollup@4.53.4:
dependencies:
'@types/estree': 1.0.8
optionalDependencies:
'@rollup/rollup-android-arm-eabi': 4.53.4
'@rollup/rollup-android-arm64': 4.53.4
'@rollup/rollup-darwin-arm64': 4.53.4
'@rollup/rollup-darwin-x64': 4.53.4
'@rollup/rollup-freebsd-arm64': 4.53.4
'@rollup/rollup-freebsd-x64': 4.53.4
'@rollup/rollup-linux-arm-gnueabihf': 4.53.4
'@rollup/rollup-linux-arm-musleabihf': 4.53.4
'@rollup/rollup-linux-arm64-gnu': 4.53.4
'@rollup/rollup-linux-arm64-musl': 4.53.4
'@rollup/rollup-linux-loong64-gnu': 4.53.4
'@rollup/rollup-linux-ppc64-gnu': 4.53.4
'@rollup/rollup-linux-riscv64-gnu': 4.53.4
'@rollup/rollup-linux-riscv64-musl': 4.53.4
'@rollup/rollup-linux-s390x-gnu': 4.53.4
'@rollup/rollup-linux-x64-gnu': 4.53.4
'@rollup/rollup-linux-x64-musl': 4.53.4
'@rollup/rollup-openharmony-arm64': 4.53.4
'@rollup/rollup-win32-arm64-msvc': 4.53.4
'@rollup/rollup-win32-ia32-msvc': 4.53.4
'@rollup/rollup-win32-x64-gnu': 4.53.4
'@rollup/rollup-win32-x64-msvc': 4.53.4
fsevents: 2.3.3
set-blocking@2.0.0: {}
source-map-js@1.2.1: {}
string-width@4.2.3:
dependencies:
emoji-regex: 8.0.0
is-fullwidth-code-point: 3.0.0
strip-ansi: 6.0.1
strip-ansi@6.0.1:
dependencies:
ansi-regex: 5.0.1
tinyglobby@0.2.15:
dependencies:
fdir: 6.5.0(picomatch@4.0.3)
picomatch: 4.0.3
undici-types@7.16.0: {}
vite@7.3.0(@types/node@25.0.2):
dependencies:
esbuild: 0.27.1
fdir: 6.5.0(picomatch@4.0.3)
picomatch: 4.0.3
postcss: 8.5.6
rollup: 4.53.4
tinyglobby: 0.2.15
optionalDependencies:
'@types/node': 25.0.2
fsevents: 2.3.3
which-module@2.0.1: {}
wrap-ansi@6.2.0:
dependencies:
ansi-styles: 4.3.0
string-width: 4.2.3
strip-ansi: 6.0.1
y18n@4.0.3: {}
yargs-parser@18.1.3:
dependencies:
camelcase: 5.3.1
decamelize: 1.2.0
yargs@15.4.1:
dependencies:
cliui: 6.0.0
decamelize: 1.2.0
find-up: 4.1.0
get-caller-file: 2.0.5
require-directory: 2.1.1
require-main-filename: 2.0.0
set-blocking: 2.0.0
string-width: 4.2.3
which-module: 2.0.1
y18n: 4.0.3
yargs-parser: 18.1.3

12
readme.md Normal file
View File

@@ -0,0 +1,12 @@
# 可视化登录组件
## 主题色
黑白
```html
<kv-login>
<div id="weixinLogin"></div>
</kv-login>
```

4
src/main.ts Normal file
View File

@@ -0,0 +1,4 @@
import './pages/kv-login'
import './pages/kv-message'
export { loginEmitter } from './pages/kv-login'

243
src/modules/login-handle.ts Normal file
View File

@@ -0,0 +1,243 @@
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';
export const message = createMessage();
type LoginOpts = {
loginMethod: 'password' | 'phone' | 'wechat' | 'wechat-mp' | 'wechat-mp-ticket',
data: any,
el: HTMLElement
}
/**
* 登录成功后重定向到首页
*/
export const redirectHome = () => {
const href = window.location.href;
const url = new URL(href);
const redirect = url.searchParams.get('redirect');
if (redirect) {
const href = decodeURIComponent(redirect);
window.open(href, '_self');
}
// 从url上清除 code 参数, 清除 state 参数
emit({ type: 'login-success', data: {} });
setTimeout(() => {
clearCode();
}, 1500);
}
export const loginHandle = async (opts: LoginOpts) => {
const { loginMethod, data, el } = opts
switch (loginMethod) {
case 'password':
await loginByPassword(data)
break
case 'phone':
await loginByPhone(data)
break
case 'wechat-mp':
await loginByWeChatMp(data)
break
case 'wechat':
await loginByWeChat(data)
break
default:
console.warn('未知的登录方式:', loginMethod)
}
}
/**
* 使用用户名和密码登录
* @param data
* @returns
*/
const loginByPassword = async (data: { username: string, password: string }) => {
console.log('使用用户名密码登录:', data)
let needLogin = true; // 这里可以根据实际情况决定是否需要登录, 只能判断密码登录和手机号登录
const isLogin = await query.checkLocalToken()
if (isLogin) {
const loginUser = await query.checkLocalUser()
if (loginUser?.username === data?.username) {
const res = await query.getMe()
if (res.code === 200) {
needLogin = false
console.log('已登录，跳过登录步骤')
message.success('已登录')
}
}
}
if (!needLogin) {
redirectHome()
return;
}
const res = await query.login({
username: data.username,
password: data.password
})
if (res.code === 200) {
console.log('登录成功')
message.success('登录成功')
redirectHome()
} else {
message.error(`登录失败: ${res.message}`)
}
}
const loginByPhone = async (data: { phone: string, code: string }) => {
console.log('使用手机号登录:', data)
}
const loginByWeChat = async (data: { wechatCode: string }) => {
console.log('使用微信登录:', data)
}
const loginByWeChatMp = async (data: { wechatMpCode: string }) => {
console.log('使用微信公众号登录:', data)
}
const clearCode = () => {
const url = new URL(window.location.href);
// 清理 URL 中的 code 参数
url.searchParams.delete('code');
url.searchParams.delete('state');
window.history.replaceState({}, document.title, url.toString());
}
export const checkWechat = async () => {
const url = new URL(window.location.href);
const code = url.searchParams.get('code');
const state = url.searchParams.get('state');
if (state?.includes?.('-')) {
// 公众号登录流程，不在这里处理
return;
}
if (!code) {
return;
}
const res = await query.loginByWechat({ code });
if (res.code === 200) {
message.success('登录成功');
redirectHome();
} else {
message.error(res.message || '登录失败');
clearCode();
}
};
export const checkMpWechat = async () => {
const url = new URL(window.location.href);
const originState = url.searchParams.get('state');
const [mpLogin, state] = originState ? originState.split('-') : [null, null];
console.log('检查微信公众号登录流程:', mpLogin, state, originState);
if (mpLogin === '1') {
// 手机端扫描的时候访问的链接，跳转到微信公众号授权页面
checkMpWechatInWx()
} else if (mpLogin === '2') {
const code = url.searchParams.get('code');
// 推送登录成功状态到扫码端
const res2 = await query.post({
path: 'wx',
key: 'mplogin',
state,
code
})
if (res2.code === 200) {
message.success('登录成功');
} else {
message.error(res2.message || '登录失败');
}
closePage();
}
}
const isWechat = () => {
const ua = navigator.userAgent.toLowerCase();
return /micromessenger/i.test(ua);
};
const closePage = (time = 2000) => {
if (!isWechat()) {
setTimeout(() => {
window.close();
}, time);
return;
}
// @ts-ignore
if (window.WeixinJSBridge) {
setTimeout(() => {
// @ts-ignore
window.WeixinJSBridge.call('closeWindow');
}, time);
} else {
setTimeout(() => {
window.close();
}, time);
}
};
const checkMpWechatInWx = async () => {
const wxAuthUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect`
const appid = WX_MP_APP_ID;
const url = new URL(window.location.href);
const originState = url.searchParams.get('state');
let [mpLogin, state] = originState ? originState.split('-') : [null, null];
const redirectURL = new URL(url.pathname, url.origin);
state = '2-' + state; // 标记为第二步登录
const redirect_uri = encodeURIComponent(redirectURL.toString())
document.body.innerHTML = `<p>正在准备跳转到微信公众号授权页面...</p>`;
const scope = `snsapi_userinfo`
if (!state) {
alert('Invalid state. Please try again later.');
closePage();
return;
}
const link = wxAuthUrl.replace('APPID', appid).replace('REDIRECT_URI', redirect_uri).replace('SCOPE', scope).replace('STATE', state);
setTimeout(() => {
window.location.href = link;
}, 100);
}
setTimeout(() => {
checkMpWechat();
}, 100);
export const getQrCode = async () => {
const res = await query.post({
path: 'wx',
key: 'get-qrcode-ticket'
})
if (res.code !== 200) {
message.error('获取二维码失败');
return null;
}
return res?.data as { ticket: string, url: string }
}
export const checkMpQrCodeLogin = (ticket: string) => {
let run = true;
const fetchLoginStatus = async () => {
const res = await query.post({
path: 'wx',
key: 'check-qrcode-login',
payload: { ticket }
})
if (res.code === 200) {
message.success('登录成功');
clearTimeout(timer);
redirectHome();
} else {
// message.error(res.message || '登录失败');
if (res.code === 401) {
console.log('等待扫码登录...');
} else {
console.log('扫码登录状态:', res);
}
if (run) {
setTimeout(fetchLoginStatus, 2000);
}
}
}
const timer = setTimeout(fetchLoginStatus, 2000);
const close = () => {
console.log('停止检测扫码登录状态');
clearTimeout(timer);
run = false
}
return close;
}

134
src/modules/mitt.ts Normal file
View File

@@ -0,0 +1,134 @@
export interface EventData<T = any> {
type: string;
data: T;
}
export type EventHandler<T = any> = (event: EventData<T>) => void;
export class EventEmitter {
private events: Map<string, Set<EventHandler>> = new Map();
/**
* 监听事件
* @param type 事件类型
* @param handler 事件处理函数
*/
on<T = any>(type: string, handler: EventHandler<T>): void {
if (!this.events.has(type)) {
this.events.set(type, new Set());
}
this.events.get(type)!.add(handler);
}
/**
* 移除事件监听器
* @param type 事件类型
* @param handler 事件处理函数 (可选，如果不提供则移除该类型的所有监听器)
*/
off<T = any>(type: string, handler?: EventHandler<T>): void {
if (!this.events.has(type)) {
return;
}
if (handler) {
this.events.get(type)!.delete(handler);
// 如果该类型没有监听器了，删除该类型
if (this.events.get(type)!.size === 0) {
this.events.delete(type);
}
} else {
// 移除该类型的所有监听器
this.events.delete(type);
}
}
/**
* 触发事件
* @param event 事件对象，包含 type 和 data
*/
emit<T = any>(event: EventData<T>): void {
const { type } = event;
if (!this.events.has(type)) {
return;
}
const handlers = this.events.get(type)!;
handlers.forEach(handler => {
try {
handler(event);
} catch (error) {
console.error(`Error in event handler for type "${type}":`, error);
}
});
}
/**
* 触发事件（简化版本，直接传递type和data）
* @param type 事件类型
* @param data 事件数据
*/
emitSimple<T = any>(type: string, data: T): void {
this.emit({ type, data });
}
/**
* 清空所有事件监听器
*/
clear(): void {
this.events.clear();
}
/**
* 获取指定类型的监听器数量
* @param type 事件类型
* @returns 监听器数量
*/
listenerCount(type: string): number {
return this.events.get(type)?.size || 0;
}
/**
* 获取所有事件类型
* @returns 事件类型数组
*/
eventNames(): string[] {
return Array.from(this.events.keys());
}
/**
* 检查是否有指定类型的监听器
* @param type 事件类型
* @returns 是否有监听器
*/
hasListeners(type: string): boolean {
return this.events.has(type) && this.events.get(type)!.size > 0;
}
/**
* 只监听一次事件
* @param type 事件类型
* @param handler 事件处理函数
*/
once<T = any>(type: string, handler: EventHandler<T>): void {
const onceHandler: EventHandler<T> = (event) => {
handler(event);
this.off(type, onceHandler);
};
this.on(type, onceHandler);
}
}
// 创建默认的事件发射器实例
export const eventEmitter = new EventEmitter();
// 导出便捷方法
export const on = <T = any>(type: string, handler: EventHandler<T>) => eventEmitter.on(type, handler);
export const off = <T = any>(type: string, handler?: EventHandler<T>) => eventEmitter.off(type, handler);
export const emit = <T = any>(event: EventData<T>) => eventEmitter.emit(event);
export const emitSimple = <T = any>(type: string, data: T) => eventEmitter.emitSimple(type, data);
export const clear = () => eventEmitter.clear();
export const once = <T = any>(type: string, handler: EventHandler<T>) => eventEmitter.once(type, handler);
// 默认导出
export default eventEmitter;

10
src/modules/query.ts Normal file
View File

@@ -0,0 +1,10 @@
import { Query } from '@kevisual/query'
import { QueryLoginBrowser } from '@kevisual/query-login';
export const queryBase = new Query()
export const query = new QueryLoginBrowser({
query: queryBase,
})

57
src/modules/wx-mp/qr.ts Normal file
View File

@@ -0,0 +1,57 @@
import QRCode, { QRCodeToDataURLOptions } from 'qrcode';
import { redirectHome } from '../login-handle.ts';
import { query } from '../query.ts';
export const useCreateLoginQRCode = (el?: HTMLCanvasElement) => {
var opts: QRCodeToDataURLOptions = {
errorCorrectionLevel: 'H',
type: 'image/jpeg',
margin: 1,
width: 300,
};
let timer: any = null;
const createQrcode = async (state: string) => {
const url = new URL(window.location.href);
const loginUrl = new URL(url.pathname, url.origin);
loginUrl.searchParams.set('state', '1-' + state);
console.log('生成登录二维码链接:', loginUrl.toString());
var img = el || document.getElementById('qrcode')! as HTMLCanvasElement;
const res = await QRCode.toDataURL(img!, loginUrl.toString(), opts);
};
const checkLogin = async (state: string) => {
const res = await fetch(`/api/router?path=wx&key=checkLogin&state=${state}`).then((res) => res.json());
if (res.code === 200) {
console.log(res);
const token = res.data;
if (token) {
localStorage.setItem('token', token.accessToken);
await query.setLoginToken(token);
}
clear();
setTimeout(() => {
redirectHome();
}, 1000);
} else {
timer = setTimeout(() => {
checkLogin(state);
console.log('继续检测登录状态');
}, 2000);
}
};
// 随机生成一个state
const state = Math.random().toString(36).substring(2, 15);
createQrcode(state);
checkLogin(state);
const timer2 = setInterval(() => {
const state = Math.random().toString(36).substring(2, 15);
clearTimeout(timer); // 清除定时器
createQrcode(state); // 90秒后更新二维码
checkLogin(state);
console.log('更新二维码');
}, 90000);
const clear = () => {
clearTimeout(timer);
clearInterval(timer2);
console.log('停止检测登录状态');
}
return { createQrcode, clear };
};

21
src/modules/wx/load-js.ts Normal file
View File

@@ -0,0 +1,21 @@
// <script src="https://turing.captcha.qcloud.com/TCaptcha.js"></script>
export const dynimicLoadTcapTcha = async (): Promise<boolean> => {
return new Promise((resolve, reject) => {
const script = document.createElement('script')
script.type = 'text/javascript'
script.id = 'tencent-captcha'
if (document.getElementById('tencent-captcha')) {
resolve(true)
return
}
script.src = 'https://turing.captcha.qcloud.com/TCaptcha.js'
script.onload = () => {
resolve(true)
}
script.onerror = (error) => {
reject(error)
}
document.body.appendChild(script)
})
}

70
src/modules/wx/tencent-captcha.ts Normal file
View File

@@ -0,0 +1,70 @@
// 定义回调函数
export function callback(res: any) {
// 第一个参数传入回调结果，结果如下：
// ret Int 验证结果，0：验证成功。2：用户主动关闭验证码。
// ticket String 验证成功的票据，当且仅当 ret = 0 时 ticket 有值。
// CaptchaAppId String 验证码应用ID。
// bizState Any 自定义透传参数。
// randstr String 本次验证的随机串，后续票据校验时需传递该参数。
console.log('callback:', res);
// res（用户主动关闭验证码）= {ret: 2, ticket: null}
// res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
// res（请求验证码发生错误，验证码自动返回terror_前缀的容灾票据） = {ret: 0, ticket: "String", randstr: "String", errorCode: Number, errorMessage: "String"}
// 此处代码仅为验证结果的展示示例，真实业务接入，建议基于ticket和errorCode情况做不同的业务处理
if (res.ret === 0) {
// 复制结果至剪切板
var str = '【randstr】->【' + res.randstr + '】 【ticket】->【' + res.ticket + '】';
var ipt = document.createElement('input');
ipt.value = str;
document.body.appendChild(ipt);
ipt.select();
document.body.removeChild(ipt);
alert('1. 返回结果（randstr、ticket）已复制到剪切板，ctrl+v 查看。 2. 打开浏览器控制台，查看完整返回结果。');
}
}
export type TencentCaptcha = {
actionDuration?: number;
appid?: string;
bizState?: any;
randstr?: string;
ret: number;
sid?: string;
ticket?: string;
errorCode?: number;
errorMessage?: string;
verifyDuration?: number;
};
// 定义验证码触发事件
export const checkCaptcha = (captchaAppId: string): Promise<TencentCaptcha> => {
return new Promise((resolve, reject) => {
const callback = (res: TencentCaptcha) => {
console.log('callback:', res);
if (res.ret === 0) {
resolve(res);
} else {
reject(res);
}
};
const appid = captchaAppId;
try {
// 生成一个验证码对象
// CaptchaAppId：登录验证码控制台，从【验证管理】页面进行查看。如果未创建过验证，请先新建验证。注意：不可使用客户端类型为小程序的CaptchaAppId，会导致数据统计错误。
//callback：定义的回调函数
// @ts-ignore
var captcha = new TencentCaptcha(appid, callback, {});
// 调用方法，显示验证码
captcha.show();
} catch (error) {
// 加载异常，调用验证码js加载错误处理函数
var ticket = 'terror_1001_' + appid + '_' + Math.floor(new Date().getTime() / 1000);
// 生成容灾票据或自行做其它处理
callback({
ret: 0,
randstr: '@' + Math.random().toString(36).substring(2),
ticket: ticket,
errorCode: 1001,
errorMessage: 'jsload_error',
});
}
});
};

61
src/modules/wx/ws-login.ts Normal file
View File

@@ -0,0 +1,61 @@
type WxLoginConfig = {
redirect_uri?: string;
appid?: string;
scope?: string;
state?: string;
style?: string;
};
export const createLogin = async (config?: WxLoginConfig) => {
let redirect_uri = config?.redirect_uri;
const { appid } = config || {};
if (!redirect_uri) {
redirect_uri = window.location.href;
}
const url = new URL(redirect_uri); // remove code and state params
url.searchParams.delete('code');
url.searchParams.delete('state');
redirect_uri = url.toString();
console.log('redirect_uri', redirect_uri);
if (!appid) {
console.error('appid is not cant be empty');
return;
}
// @ts-ignore
const obj = new WxLogin({
self_redirect: false,
id: 'weixinLogin', // 需要显示的容器id
appid: appid, // 微信开放平台appid wx*******
scope: 'snsapi_login', // 网页默认即可 snsapi_userinfo
redirect_uri: encodeURIComponent(redirect_uri), // 授权成功后回调的url
state: Math.ceil(Math.random() * 1000), // 可设置为简单的随机数加session用来校验
stylelite: true, // 是否使用简洁模式
// https://juejin.cn/post/6982473580063752223
href: "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDIwMHB4O30NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0NCi5pbXBvd2VyQm94IC5zdGF0dXMge3RleHQtYWxpZ246IGNlbnRlcjt9"
});
const login = document.querySelector('#weixinLogin')
if (login) {
// login 下的 iframe 样式调整
const iframe = login.querySelector('iframe');
if (iframe) {
// iframe.style.width = '200px';
iframe.style.height = '300px';
}
}
return obj;
};
export const wxId = 'weixinLogin';
export function setWxerwma(config?: WxLoginConfig) {
const s = document.createElement('script');
s.type = 'text/javascript';
s.src = '//res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js';
s.id = 'weixinLogin-js';
if (document.getElementById('weixinLogin-js')) {
createLogin(config);
return;
}
const wxElement = document.body.appendChild(s);
wxElement.onload = function () {
createLogin(config);
};
}

575
src/pages/kv-login.ts Normal file
View File

@@ -0,0 +1,575 @@
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';
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 {
id: LoginMethods
name: string
icon: any
appid?: string
}
const wxmpSvg = `<svg t="1764510467010" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1958" width="32" height="32"><path d="M615.904 388.48c8.8 0 17.536 0.64 26.176 1.6-23.52-109.536-140.608-190.912-274.272-190.912C218.4 199.2 96 301.056 96 430.4c0 74.656 40.736 135.936 108.768 183.488l-27.2 81.792 95.04-47.648c33.984 6.72 61.28 13.632 95.2 13.632 8.544 0 16.992-0.416 25.376-1.088a202.496 202.496 0 0 1-8.384-56.96c0-118.752 101.984-215.136 231.104-215.136zM469.76 314.784c20.48 0 34.016 13.472 34.016 33.92 0 20.352-13.536 34.016-34.016 34.016-20.384 0-40.832-13.664-40.832-34.016 0-20.448 20.448-33.92 40.832-33.92zM279.52 382.72c-20.384 0-40.928-13.664-40.928-34.016 0-20.448 20.544-33.92 40.928-33.92 20.352 0 33.92 13.472 33.92 33.92 0 20.384-13.568 34.016-33.92 34.016z" fill="" p-id="1959"></path><path d="M864 600.352c0-108.672-108.736-197.28-230.88-197.28-129.344 0-231.2 88.576-231.2 197.28 0 108.864 101.856 197.248 231.2 197.248 27.072 0 54.368-6.816 81.568-13.632l74.56 40.8-20.448-67.904C823.328 715.936 864 661.664 864 600.352z m-305.856-34.016c-13.536 0-27.2-13.44-27.2-27.2 0-13.568 13.664-27.2 27.2-27.2 20.576 0 34.016 13.632 34.016 27.2 0 13.76-13.44 27.2-34.016 27.2z m149.536 0c-13.44 0-27.008-13.44-27.008-27.2 0-13.568 13.568-27.2 27.008-27.2 20.352 0 34.016 13.632 34.016 27.2 0 13.76-13.664 27.2-34.016 27.2z" fill="" p-id="1960"></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 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 icons: any = {
pwd,
phone,
wxmpSvg,
wxOpenSvg
}
const DefaultLoginMethods: LoginMethod[] = [
{ 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' }
]
const LoginMethods = ['password', 'phone', 'wechat', 'wechat-mp', 'wechat-mp-ticket'] as const;
type LoginMethods = 'password' | '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'
}
switch (domain) {
case 'kevisual.xiongxiao.me':
methods = ['password', 'wechat-mp']
break;
case 'kevisual.cn':
methods = ['password', 'wechat-mp-ticket', 'wechat',]
break;
case 'localhost:51015':
methods = ['password']
break
default:
methods = ['password', 'phone', 'wechat', 'wechat-mp', 'wechat-mp-ticket']
break;
}
return DefaultLoginMethods.filter(method => methods.includes(method.id))
}
const getLoginMethod = (methods: LoginMethods[]): LoginMethod[] => {
return DefaultLoginMethods.filter(method => methods.includes(method.id))
}
class KvLogin extends HTMLElement {
private selectedMethod: LoginMethods = 'password'
private loginMethods: LoginMethod[] = getLoginMethodByDomain();
setLoginMethods(methods: LoginMethod[]) {
this.loginMethods = methods
this.render()
}
constructor() {
super()
}
connectedCallback() {
this.attachShadow({ mode: 'open' })
this.render()
this.bindEvents()
checkWechat()
const method = this.getAttribute('method');
if (method) {
const methods = method ? method.split(',') as LoginMethods[] : [];
if (methods.length > 0) {
const loginMethods = methods.filter(m => LoginMethods.includes(m));
if (loginMethods.length > 0) {
this.loginMethods = getLoginMethod(loginMethods)
this.selectedMethod = loginMethods[0]
return;
}
}
this.loginMethods = getLoginMethodByDomain();
this.selectedMethod = this.loginMethods[0].id;
}
}
#clearTimer: any = null;
private selectLoginMethod(methodId: LoginMethods) {
this.selectedMethod = methodId
this.render()
if (this.#clearTimer) {
this.#clearTimer();
this.#clearTimer = null;
}
}
private getMethodData(methodId: LoginMethods): LoginMethod | undefined {
return this.loginMethods.find(method => method.id === methodId);
}
private bindEvents() {
if (!this.shadowRoot) return
// 使用事件委托来处理登录方式切换
this.shadowRoot.addEventListener('click', (e) => {
const target = e.target as HTMLElement
const methodButton = target.closest('.login-method')
if (methodButton) {
const methodId = methodButton.getAttribute('data-method') as LoginMethods
if (methodId) {
this.selectLoginMethod(methodId)
}
}
})
// 使用事件委托来处理表单提交
this.shadowRoot.addEventListener('submit', (e) => {
const target = e.target as HTMLElement
if (target && target.id === 'loginForm') {
e.preventDefault()
this.handleLogin()
}
})
loginEmitter.on('login-success', () => {
console.log('收到登录成功事件，处理后续逻辑')
});
}
private handleLogin() {
const formData = this.getFormData()
loginHandle({
loginMethod: this.selectedMethod,
data: formData,
el: this
})
// 这里可以触发自定义事件，通知父组件
this.dispatchEvent(new CustomEvent('login', {
detail: {
method: this.selectedMethod,
data: formData
},
bubbles: true
}))
}
private getFormData(): any {
if (!this.shadowRoot) return {}
switch (this.selectedMethod) {
case 'password':
const username = this.shadowRoot.querySelector('#username') as HTMLInputElement
const password = this.shadowRoot.querySelector('#password') as HTMLInputElement
return {
username: username?.value || '',
password: password?.value || ''
}
case 'phone':
const phone = this.shadowRoot.querySelector('#phone') as HTMLInputElement
const code = this.shadowRoot.querySelector('#code') as HTMLInputElement
return {
phone: phone?.value || '',
code: code?.value || ''
}
case 'wechat':
return {
wechatCode: 'mock_wechat_code'
}
case 'wechat-mp':
return {
wechatMpCode: 'mock_wechat_mp_code'
}
default:
return {}
}
}
private renderPasswordForm() {
return html`
<form id="loginForm" class="login-form">
<div class="form-group">
<input
type="text"
id="username"
name="username"
placeholder="请输入用户名"
autocomplete="username"
required
/>
</div>
<div class="form-group">
<input
type="password"
id="password"
name="password"
placeholder="请输入密码"
autocomplete="current-password"
required
/>
</div>
<button type="submit" class="login-button">登录</button>
</form>
`
}
private renderPhoneForm() {
return html`
<form id="loginForm" class="login-form">
<div class="form-group">
<input
type="tel"
id="phone"
name="phone"
placeholder="请输入手机号"
pattern="[0-9]{11}"
autocomplete="tel"
required
/>
</div>
<div class="form-group code-group">
<input
type="text"
id="code"
name="code"
placeholder="请输入验证码"
autocomplete="one-time-code"
required
/>
<button type="button" class="code-button" @click=${this.sendVerificationCode}>获取验证码</button>
</div>
<button type="submit" class="login-button">登录</button>
</form>
`
}
private renderWechatForm() {
return html`
<div class="wechat-login">
<slot></slot>
</div>
`
}
private renderWechatMpForm() {
const that = this
setTimeout(() => {
const qrcode = that.shadowRoot!.querySelector('#qrcode');
const { clear } = useCreateLoginQRCode(qrcode as HTMLCanvasElement);
that.#clearTimer = clear;
}, 0)
return html`
<div class="wechat-login">
<div class="qr-container">
<div class="qr-placeholder">
<canvas id='qrcode' width='300' height='300'></canvas>
<p class="qr-desc">请使用微信扫描二维码登录</p>
</div>
</div>
</div>
`
}
private renderWechatMpTicketForm() {
const that = this;
setTimeout(async () => {
const data = await getQrCode();
if (!data) return;
const imgEl = that.shadowRoot!.querySelector('.qrcode') as HTMLImageElement;
if (data.url) {
imgEl.src = data.url;
// TODO: 轮询检测登录状态
const clear = checkMpQrCodeLogin(data.ticket)
// 当切换登录方式时，停止轮询
that.#clearTimer = clear
}
}, 0)
return html`
<div class="wechat-login">
<div class="qr-container">
<div class="qr-placeholder">
<img class="qrcode" width="300" height="300" data-appid="" data-size="200" data-ticket=""></img>
<p class="qr-desc">请使用微信扫描二维码登录</p>
</div>
</div>
</div>
`
}
private sendVerificationCode() {
console.log('发送验证码')
// 这里可以实现发送验证码的逻辑
}
private refreshQR() {
console.log('刷新二维码')
// 这里可以实现刷新二维码的逻辑
}
private renderLoginForm() {
const data = this.getMethodData(this.selectedMethod);
switch (this.selectedMethod) {
case 'password':
return this.renderPasswordForm()
case 'phone':
return this.renderPhoneForm()
case 'wechat':
setWxerwma({ appid: data?.appid! || "" });
return this.renderWechatForm()
case 'wechat-mp':
return this.renderWechatMpForm()
case 'wechat-mp-ticket':
return this.renderWechatMpTicketForm()
default:
return this.renderPasswordForm()
}
}
render() {
if (!this.shadowRoot) return
const renderIcon = (icon: any) => {
// 如果是emoji字符，直接返回
if (typeof icon === 'string' && !icons[icon]) {
return html`<span class="method-icon-emoji">${icon}</span>`
}
// 如果是SVG引用，从icons对象获取
if (typeof icon === 'string' && icons[icon]) {
return html`<span class="method-icon-svg">${unsafeHTML(icons[icon])}</span>`
}
// 如果直接是SVG内容
if (typeof icon === 'string' && (icon.includes('<svg') || icon.includes('<?xml'))) {
return html`<span class="method-icon-svg">${unsafeHTML(icon)}</span>`
}
// 默认情况
return html`<span class="method-icon-emoji">${icon}</span>`
}
const template = html`
<style>
:host {
display: block;
width: 100%;
min-width: 400px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.login-sidebar {
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.login-methods {
display: flex;
background: #f5f5f5;
border-bottom: 1px solid #000000;
}
.login-method {
flex: 1;
padding: 16px 8px;
border: none;
background: none;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
transition: all 0.3s ease;
position: relative;
}
.login-method:hover {
background: #d0d0d0;
}
.login-method.active {
background: white;
color: #000000;
}
.login-method.active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: #000000;
}
.method-icon {
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
}
.method-icon-emoji {
font-size: 20px;
line-height: 1;
}
.method-icon-svg {
display: flex;
align-items: center;
justify-content: center;
}
.method-icon-svg svg {
width: 32px;
height: 32px;
display: block;
}
.method-name {
font-size: 12px;
font-weight: 500;
}
.login-content {
padding: 32px 24px;
}
.impowerBox .qrcode {
width: 200px !important;
}
.login-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.form-group {
position: relative;
}
.form-group input {
width: 100%;
padding: 12px 16px;
border: 2px solid #cccccc;
border-radius: 8px;
font-size: 14px;
transition: border-color 0.3s ease;
box-sizing: border-box;
}
.form-group input:focus {
outline: none;
border-color: #000000;
}
.code-group {
display: flex;
gap: 12px;
}
.code-group input {
flex: 1;
}
.code-button {
padding: 0 16px;
background: #6c757d;
color: white;
border: none;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.3s ease;
}
.code-button:hover {
background: #5a6268;
}
.login-button {
padding: 12px;
background: #000000;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s ease;
}
.login-button:hover {
background: #333333;
}
.wechat-login {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.qr-container {
width: 340px;
height: 340px;
border: 2px solid #000000;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.qr-placeholder {
text-align: center;
color: #333333;
}
.qr-icon {
font-size: 48px;
margin-bottom: 8px;
}
.qr-desc {
font-size: 12px;
margin-top: 4px;
}
.refresh-button {
padding: 8px 16px;
background: #6c757d;
color: white;
border: none;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.refresh-button:hover {
background: #5a6268;
}
.method-icon svg {
width: 24px;
height: 24px;
}
</style>
<div class="login-sidebar">
<div class="login-methods">
${this.loginMethods.map(method => html`
<button
class="login-method ${this.selectedMethod === method.id ? 'active' : ''}"
data-method="${method.id}"
>
${renderIcon(method.icon)}
<span class="method-name">${method.name}</span>
</button>
`)}
</div>
<div class="login-content">
${this.renderLoginForm()}
</div>
</div>
`
render(template, this.shadowRoot)
}
}
customElements.define('kv-login', KvLogin)

351
src/pages/kv-message.ts Normal file
View File

@@ -0,0 +1,351 @@
import { html, render, TemplateResult } from 'lit-html'
export interface KvMessageOptions {
type?: 'success' | 'error' | 'loading'
message: string
duration?: number
closable?: boolean
position?: 'center' | 'right'
}
class KvMessage extends HTMLElement {
private options: KvMessageOptions
private timer: number | null = null
constructor() {
super()
this.options = {
type: 'success',
message: '',
duration: 2000,
closable: true
}
}
connectedCallback() {
this.render()
}
setOptions(options: KvMessageOptions) {
this.options = { ...this.options, ...options }
this.render()
}
private render() {
const { type, message, closable } = this.options
const getTypeIcon = () => {
switch (type) {
case 'success':
return '✓'
case 'error':
return '✕'
case 'loading':
return html`<div class="loading-spinner"></div>`
default:
return ''
}
}
const template: TemplateResult = html`
<style>
:host {
display: block;
margin-bottom: 12px;
animation: slideIn 0.3s ease-out;
}
.message-container {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
background: white;
position: relative;
min-width: 300px;
max-width: 500px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
line-height: 1.4;
}
.message-container.success {
border-left: 4px solid #52c41a;
}
.message-container.error {
border-left: 4px solid #ff4d4f;
}
.message-container.loading {
border-left: 4px solid #1890ff;
}
.message-icon {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
flex-shrink: 0;
}
.success .message-icon {
color: #52c41a;
font-weight: bold;
}
.error .message-icon {
color: #ff4d4f;
font-weight: bold;
}
.loading .message-icon {
color: #1890ff;
}
.loading-spinner {
width: 14px;
height: 14px;
border: 2px solid #f3f3f3;
border-top: 2px solid #1890ff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
.message-content {
flex: 1;
color: #333;
}
.message-close {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
cursor: pointer;
color: #999;
background: none;
border: none;
font-size: 12px;
border-radius: 50%;
transition: all 0.2s;
}
.message-close:hover {
color: #666;
background: #f0f0f0;
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideOut {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(100%);
opacity: 0;
}
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.removing {
animation: slideOut 0.3s ease-out forwards;
}
</style>
<div class="message-container ${type}">
<div class="message-icon">
${getTypeIcon()}
</div>
<div class="message-content">${message}</div>
${closable ? html`
<button class="message-close" @click=${() => this.remove()}>&times;</button>
` : ''}
</div>
`
render(template, this)
if (type !== 'loading' && this.options.duration && this.options.duration > 0) {
this.setTimer()
}
}
private setTimer() {
if (this.timer) {
clearTimeout(this.timer)
}
this.timer = window.setTimeout(() => {
this.remove()
}, this.options.duration)
}
remove() {
if (this.timer) {
clearTimeout(this.timer)
this.timer = null
}
this.classList.add('removing')
setTimeout(() => {
if (this.parentNode) {
this.parentNode.removeChild(this)
}
}, 300)
}
disconnectedCallback() {
if (this.timer) {
clearTimeout(this.timer)
this.timer = null
}
}
}
customElements.define('kv-message', KvMessage)
export class KvMessageManager {
private static instance: KvMessageManager
private container: HTMLElement | null = null
private defaultPosition: 'center' | 'right' = 'center'
static getInstance(): KvMessageManager {
if (!KvMessageManager.instance) {
KvMessageManager.instance = new KvMessageManager()
}
return KvMessageManager.instance
}
setDefaultPosition(position: 'center' | 'right') {
this.defaultPosition = position
}
private getContainer(position?: 'center' | 'right'): HTMLElement {
const finalPosition = position || this.defaultPosition
if (!this.container) {
this.container = document.getElementById('messages')
if (!this.container) {
this.container = document.createElement('div')
this.container.id = 'messages'
if (finalPosition === 'center') {
this.container.style.cssText = `
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
display: flex;
gap: 8px;
flex-direction: column;
align-items: center;
pointer-events: none;
`
} else {
this.container.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
display: flex;
gap: 8px;
flex-direction: column;
align-items: flex-end;
pointer-events: none;
`
}
document.body.appendChild(this.container)
}
}
return this.container
}
show(options: KvMessageOptions): KvMessage {
const container = this.getContainer(options.position)
const message = document.createElement('kv-message') as KvMessage
message.setOptions(options)
message.style.cssText = 'pointer-events: auto;'
container.appendChild(message)
return message
}
success(message: string, options?: { duration?: number; position?: 'center' | 'right'; closable?: boolean }): KvMessage {
return this.show({
type: 'success',
message,
duration: options?.duration || 2000,
position: options?.position,
closable: options?.closable
})
}
error(message: string, options?: { duration?: number; position?: 'center' | 'right'; closable?: boolean }): KvMessage {
return this.show({
type: 'error',
message,
duration: options?.duration || 3000,
position: options?.position,
closable: options?.closable
})
}
loading(message: string, options?: { position?: 'center' | 'right'; closable?: boolean }): KvMessage {
return this.show({
type: 'loading',
message,
duration: 0,
position: options?.position,
closable: options?.closable
})
}
remove(message: KvMessage) {
message.remove()
}
clear() {
const container = this.getContainer()
const messages = container.querySelectorAll('kv-message')
messages.forEach(message => {
(message as KvMessage).remove()
})
}
}
export const createMessage = () => KvMessageManager.getInstance()
// 将 createMessage 暴露到全局，以便 HTML 中的 JavaScript 可以使用
declare global {
interface Window {
createMessage: typeof createMessage
}
}
window.createMessage = createMessage

127
types/index.d.ts vendored Normal file
View File

@@ -0,0 +1,127 @@
type LoginMethods = 'password' | 'phone' | 'wechat' | 'wechat-mp' | 'wechat-mp-ticket';
interface KvLoginEventMap {
login: CustomEvent<{
method: LoginMethods;
data: LoginFormData[LoginMethods] | any;
}>;
/**
* 登录方式切换事件
*/
methodChange: CustomEvent<{
method: LoginMethods;
previousMethod?: LoginMethods;
}>;
/**
* 登录验证失败事件
*/
validationError: CustomEvent<{
method: LoginMethods;
errors: string[];
formData: LoginFormData[LoginMethods] | any;
}>;
}
interface KvLogin extends HTMLElement {
/**
* 设置登录方式
*/
setLoginMethods(methods: LoginMethod[]): void;
/**
* 添加自定义登录方式
*/
addLoginMethod(method: LoginMethod): void;
/**
* 移除登录方式
*/
removeLoginMethod(methodId: LoginMethods): void;
/**
* 获取当前选中的登录方式
*/
getSelectedMethod(): LoginMethods;
/**
* 设置默认登录方式
*/
setDefaultMethod(methodId: LoginMethods): void;
addEventListener<K extends keyof KvLoginEventMap>(
type: K,
listener: (this: KvLogin, ev: KvLoginEventMap[K]) => void,
options?: boolean | AddEventListenerOptions
): void;
removeEventListener<K extends keyof KvLoginEventMap>(
type: K,
listener: (this: KvLogin, ev: KvLoginEventMap[K]) => void,
options?: boolean | EventListenerOptions
): void;
}
declare global {
interface HTMLElementTagNameMap {
'kv-login': KvLogin;
}
namespace JSX {
interface IntrinsicElements {
'kv-login': KvLoginAttributes;
}
}
}
interface KvLoginAttributes extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
/**
* 自定义登录方式配置
*/
loginMethods?: LoginMethod[];
/**
* 自定义样式类名
*/
customClass?: string;
/**
* 是否显示登录方式选择器
*/
showMethodSelector?: boolean;
/**
* 默认选中的登录方式
*/
defaultMethod?: LoginMethods;
}
interface LoginMethod {
id: LoginMethods;
name: string;
icon: string | any; // 可以是emoji字符串、SVG字符串或其他图标类型
appid?: string;
disabled?: boolean;
order?: number; // 用于排序
}
interface LoginFormData {
password?: {
username: string;
password: string;
};
phone?: {
phone: string;
code: string;
};
wechat?: {
wechatCode: string;
};
'wechat-mp'?: {
wechatMpCode: string;
};
'wechat-mp-ticket'?: {
wechatMpCode: string;
ticket: string;
};
}
export {
KvLogin,
KvLoginEventMap,
KvLoginAttributes,
LoginMethods,
LoginMethod,
LoginFormData
};

15
vite.config.ts Normal file
View File

@@ -0,0 +1,15 @@
import { defineConfig } from 'vite';
const idDev = process.env.NODE_ENV === 'development';
export default defineConfig({
base: idDev ? '/' : '/root/kv-login-test/',
server: {
proxy: {
'/api': {
target: 'https://kevisual.xiongxiao.me',
changeOrigin: true,
secure: false,
}
}
}
});