AI/login.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Expires" content="Thu, 01 Jan 1970 00:00:00 GMT">
	<title>新能源智能体</title>
	<link rel="icon" href="./img/logo.png" type="image/x-icon">
	<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxloginqrcode.js"></script>
	<style>
		*,
		*::after,
		*::before {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		html,
		body {
			height: 100%;
			width: 100%;
		}

		body {
			display: flex;
			justify-content: center;
			align-items: center;
			font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", "Segoe UI", Arial, sans-serif;
			font-size: 12px;
			background: repeating-linear-gradient(to bottom right, #cee3fc 20%, #a8c7ed87 50%, #ffffffe7 50%, #ffffffc2 80%);
			color: #a0a5a8;
			overflow: hidden;
		}

		.main {
			position: relative;
			width: 1100px;
			height: 600px;
			padding: 25px;
			background-color: #fff;
			box-shadow: 10px 0 10px #d0d5dd;
			border-radius: 12px;
			overflow: hidden;
		}

		.container {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			position: absolute;
			top: 0;
			width: 600px;
			height: 100%;
			padding: 25px;
			background-color: #fff;
			transition: 1.25s;
		}

		.a-container {
			z-index: 100;
			left: calc(100% - 600px);
		}

		.form {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			width: 100%;
			height: 100%;
		}

		.tab {
			display: flex;
			border-bottom: 1px solid #eee;
			margin-bottom: 20px;
			width: 65%;
		}

		.tab-item {
			flex: 1;
			text-align: center;
			padding: 12px 0;
			cursor: pointer;
			font-size: 16px;
			color: #666;
		}

		.tab-item.active {
			color: #1677ff;
			border-bottom: 2px solid #1677ff;
		}

		.form-panel {
			display: none;
			width: 350px;
		}

		.form-panel.active {
			display: block;
		}

		.input-group {
			margin-bottom: 20px;
			width: 100%;
		}

		.label {
			font-size: 14px;
			color: #555;
			margin-bottom: 8px;
		}

		.username,
		.password {
			position: relative;
		}

		.username .icon,
		.password .icon.left {
			position: absolute;
			top: 50%;
			left: 0.5rem;
			transform: translateY(-50%);
			color: #888;
			width: 18px;
			height: 18px;
		}

		.password .icon.right {
			position: absolute;
			top: 50%;
			right: 0.5rem;
			transform: translateY(-50%);
			color: #888;
			cursor: pointer;
			width: 20px;
			height: 20px;
		}

		.form__input {
			width: 100%;
			height: 40px;
			margin: 4px 0;
			padding-left: 2rem;
			padding-right: 2.5rem;
			font-size: 13px;
			letter-spacing: 0.15px;
			border: none;
			outline: none;
			background-color: #fff;
			transition: 0.25s ease;
			border-radius: 8px;
			box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
		}

		.form__input:focus {
			box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
		}

		.remember {
			width: 100%;
			display: flex;
			align-items: center;
			gap: 6px;
			margin: 16px 0 0;
			font-size: 13px;
			color: #000;
			cursor: pointer;
			user-select: none;
		}

		.remember input {
			accent-color: #0f73ee;
			cursor: pointer;
		}

		.button {
			width: 100%;
			height: 46px;
			border-radius: 8px;
			margin-top: 20px;
			font-weight: 700;
			font-size: 14px;
			letter-spacing: 1.15px;
			background-color: #0f73ee;
			color: #f9f9f9;
			border: none;
			outline: none;
			cursor: pointer;
			box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;
			transition: all 0.2s ease;
		}

		.button:hover {
			box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #f9f9f9;
			transform: scale(0.985);
		}

		.button:active {
			box-shadow: 2px 2px 6px #d1d9e6, -2px -2px 6px #f9f9f9;
			transform: scale(0.97);
		}

		.button:disabled {
			opacity: 0.6;
			cursor: not-allowed;
		}

		.agree {
			font-size: 12px;
			color: #666;
			margin-top: 14px;
			display: flex;
			align-items: center;
			gap: 4px;
		}

		.agree input {
			accent-color: #0f73ee;
		}

		.link {
			color: #1677ff;
			cursor: pointer;
		}

		#weixin_container {
			width: 300px;
			height: 300px;
			margin: 0 auto;
		}

		.wechat-tip {
			text-align: center;
			margin-top: 16px;
			font-size: 13px;
			color: #666;
		}

		.switch {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 500px;
			padding: 50px;
			z-index: 200;
			transition: 1.25s;
			background-color: #fff;
			overflow: hidden;
		}

		.switch__circle {
			position: absolute;
			width: 450px;
			height: 450px;
			border-radius: 50%;
			background-color: #fff;
			box-shadow: inset 8px 8px 12px #dde6f4, inset -8px -8px 12px #f9f9f9;
			bottom: -60%;
			left: -60%;
			transition: 1.25s;
		}

		.switch__container {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			position: absolute;
			width: 480px;
			transition: 1.25s;
		}

		.switch__title {
			font-size: 34px;
			font-weight: 700;
			line-height: 1.5;
			color: #181818;
			margin-left: 10px;
		}

		.switch__subtitle {
			font-size: 20px;
			font-weight: 500;
			color: #666;
			margin-left: 10px;
		}

		.logo-row {
			display: flex;
			align-items: center;
		}

		.logo-row img {
			width: 60px;
		}

		.toast {
			position: fixed;
			top: 22%;
			left: 50%;
			transform: translateX(-50%);
			background: rgba(0, 0, 0, 0.78);
			color: #fff;
			padding: 10px 18px;
			border-radius: 8px;
			font-size: 14px;
			opacity: 0;
			transition: opacity 0.3s ease;
			z-index: 9999;
			pointer-events: none;
			white-space: nowrap;
		}

		.toast.show {
			opacity: 1;
		}

		@media (max-width: 1200px) {
			.main {
				transform: scale(0.9);
			}

			.switch {
				width: 40%;
			}

			.container {
				width: 60%;
			}
		}

		@media (max-width: 1000px) {
			.main {
				transform: scale(0.8);
			}
		}

		@media (max-width: 800px) {
			body {
				padding: 0;
			}

			.main {
				transform: scale(0.9);
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100vh;
				width: 600px;
				box-shadow: none;
			}

			.a-container {
				position: absolute;
				z-index: 100;
				left: 50%;
				transform: translateX(-50%);
			}

			.switch {
				display: none;
			}

			.tab {
				width: 100%;
			}
		}

		@media (max-width: 600px) {
			.main {
				transform: scale(0.9);
				display: flex;
				justify-content: center;
				align-items: center;
				height: 75vh;
				width: 100vh;
				box-shadow: 10px 0 10px #5c7aaa;
			}

			.a-container {
				position: absolute;
				width: 100%;
				z-index: 100;
				left: 50%;
				transform: translateX(-50%);
			}

			.switch {
				display: none;
			}
		}
	</style>
</head>

<body>
	<div class="login">
		<div class="main">
			<div class="container a-container" id="a-container">
				<div class="tab">
					<div class="tab-item active" data-tab="password">密码登录</div>
					<div class="tab-item" data-tab="weixin">微信登录</div>
				</div>

				<div class="form-panel active" id="password-panel">
					<div class="input-group">
						<div class="label">账号</div>
						<div class="username">
							<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
								<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
								<circle cx="12" cy="7" r="4" />
							</svg>
							<input class="form__input" type="text" id="username" placeholder="请输入账号"
								autocomplete="off" />
						</div>
					</div>

					<div class="input-group">
						<div class="label" style="margin-top:20px;">密码</div>
						<div class="password">
							<svg class="icon left" viewBox="0 0 24 24" fill="none" stroke="currentColor"
								stroke-width="2">
								<rect x="3" y="11" width="18" height="11" rx="2" />
								<path d="M7 11V7a5 5 0 0 1 10 0v4" />
							</svg>
							<input class="form__input" type="password" id="password" placeholder="请输入密码"
								autocomplete="off" onkeydown="if(event.key==='Enter') handleLogin()" />
							<svg class="icon right" id="eyeBtn" viewBox="0 0 24 24" fill="none" stroke="currentColor"
								stroke-width="2">
								<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
								<circle cx="12" cy="12" r="3" />
							</svg>
						</div>
					</div>

					<label class="remember">
						<input type="checkbox" id="rememberMe" />
						记住密码
					</label>

					<button class="button" id="loginBtn" onclick="handleLogin()">登录</button>

					<div class="agree">
						<input type="checkbox" id="agree" checked />
						我已阅读并同意
						<span class="link">《用户服务协议》</span>、
						<span class="link">《隐私政策》</span>
					</div>
				</div>

				<div class="form-panel" id="weixin-panel">
					<div id="weixin_container"></div>
				</div>
			</div>

			<div class="switch" id="switch-cnt">
				<div class="switch__circle"></div>
				<div class="switch__container">
					<div class="logo-row">
						<img src="./img/logo.png" alt="logo" onerror="this.style.display='none'">
						<div>
							<div class="switch__title">新能源智能体</div>
							<div class="switch__subtitle">sataBotAgent</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="toast" id="toast"></div>
	        <script src="./wxLogin.js"></script>


	<script>
		const WECHAT_APPID = 'wx0eeb7556d60121db';
		const WECHAT_REDIRECT_URI = encodeURIComponent('https://serviceai.satabot.com/webCallback/');

		function setCookie(name, value, days) {
			days = days || 30;
			const d = new Date();
			d.setTime(d.getTime() + days * 24 * 60 * 60 * 1000);
			document.cookie = name + '=' + encodeURIComponent(value) + ';expires=' + d.toUTCString() + ';path=/';
		}

		function getCookie(name) {
			const m = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
			return m ? decodeURIComponent(m[2]) : undefined;
		}

		function removeCookie(name) {
			document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;';
		}

		function showToast(msg) {
			const t = document.getElementById('toast');
			t.innerText = msg;
			t.classList.add('show');
			clearTimeout(t._timer);
			t._timer = setTimeout(() => t.classList.remove('show'), 2200);
		}

		const tabs = document.querySelectorAll('.tab-item');
		const panels = document.querySelectorAll('.form-panel');
		tabs.forEach(tab => {
			tab.addEventListener('click', () => {
				const target = tab.dataset.tab;
				tabs.forEach(t => t.classList.remove('active'));
				panels.forEach(p => p.classList.remove('active'));
				tab.classList.add('active');
				document.getElementById(target + '-panel').classList.add('active');
				if (target === 'weixin') {
					initWxLogin();
				}
			});
		});

		const eyeBtn = document.getElementById('eyeBtn');
		const pwdInput = document.getElementById('password');
		eyeBtn.addEventListener('click', () => {
			const isPwd = pwdInput.type === 'password';
			pwdInput.type = isPwd ? 'text' : 'password';
			eyeBtn.innerHTML = isPwd
				? '<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/>'
				: '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>';
		});

		function getCookieCredentials() {
			const username = getCookie('username');
			const password = getCookie('password');
			const rememberMe = getCookie('rememberMe');
			if (username !== undefined) document.getElementById('username').value = username;
			if (password !== undefined) document.getElementById('password').value = password;
			if (rememberMe !== undefined) document.getElementById('rememberMe').checked = Boolean(rememberMe === 'true' || rememberMe === true);
		}
		getCookieCredentials();

		function handleLogin() {
			const agree = document.getElementById('agree').checked;
			if (!agree) {
				showToast('请阅读并同意用户协议！');
				return;
			}

			const username = document.getElementById('username').value.trim();
			const password = document.getElementById('password').value;
			const rememberMe = document.getElementById('rememberMe').checked;
			const btn = document.getElementById('loginBtn');

			if (!username) { showToast('请输入账号'); return; }
			if (!password) { showToast('请输入密码'); return; }

			if (rememberMe) {
				setCookie('username', username, 30);
				setCookie('password', password, 30);
				setCookie('rememberMe', true, 30);
			} else {
				removeCookie('username');
				removeCookie('password');
				removeCookie('rememberMe');
			}

			btn.disabled = true;
			btn.innerText = '登陆中...';

			fetch('https://serviceri.satabot.com/login', {
				method: 'POST',
				headers: { 'Content-Type': 'application/json' },
				body: JSON.stringify({ username, password, sourceType: 1 })
			})
				.then(r => r.json())
				.then(data => {
					if (data && data.code === 200 && data.userId) {
						const rawUserId = String(data.userId);
						const encodedUserId = btoa(unescape(encodeURIComponent(rawUserId)));
						setCookie('token', data.token || ('t_' + Date.now()), 7);
						setCookie('userId', rawUserId, 7);
						if (data.userName) setCookie('nickname', data.userName, 7);
						setTimeout(() => {
							window.location.href = './index.html?userId=' + encodedUserId;
						}, 100);
					} else {
						showToast((data && data.msg) || '账号或密码错误');
						btn.disabled = false;
						btn.innerText = '登录';
					}
				})
				.catch(() => {
					showToast('登录请求失败，请稍后重试');
					btn.disabled = false;
					btn.innerText = '登录';
				});
		}

		let wxInited = false;
		function initWxLogin() {
			if (wxInited) return;
			if (typeof window.WxLogin !== 'function') {
				setTimeout(initWxLogin, 100);
				return;
			}
			try {
				new window.WxLogin({
					id: 'weixin_container',
					appid: WECHAT_APPID,
					scope: 'snsapi_login',
					redirect_uri: WECHAT_REDIRECT_URI,
					state: 'ai'
				});
				wxInited = true;
			} catch (e) {
				console.error('WxLogin init error:', e);
			}
		}

		history.pushState(null, null, location.href);
		window.addEventListener('popstate', () => {
			history.pushState(null, null, location.href);
		});

		if (getCookie('token') && getCookie('userId')) {
			const rawUserId = getCookie('userId');
			const encodedUserId = btoa(unescape(encodeURIComponent(rawUserId)));
			window.location.href = './index.html?userId=' + encodedUserId;
		}
	</script>
</body>

</html>