完成登录功能
This commit is contained in:
Allen
commit
86805d882e
16
.eslintrc.json
Normal file
16
.eslintrc.json
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"env": {
|
||||||
|
"browser": true,
|
||||||
|
"es6": true,
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"eslint:recommended",
|
||||||
|
"plugin:@typescript-eslint/eslint-recommended",
|
||||||
|
"plugin:@typescript-eslint/recommended",
|
||||||
|
"plugin:import/recommended",
|
||||||
|
"plugin:import/electron",
|
||||||
|
"plugin:import/typescript"
|
||||||
|
],
|
||||||
|
"parser": "@typescript-eslint/parser"
|
||||||
|
}
|
||||||
92
.gitignore
vendored
Normal file
92
.gitignore
vendored
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||||
|
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
*.pid.lock
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||||
|
lib-cov
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
*.lcov
|
||||||
|
|
||||||
|
# nyc test coverage
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# node-waf configuration
|
||||||
|
.lock-wscript
|
||||||
|
|
||||||
|
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||||
|
build/Release
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules/
|
||||||
|
jspm_packages/
|
||||||
|
|
||||||
|
# TypeScript v1 declaration files
|
||||||
|
typings/
|
||||||
|
|
||||||
|
# TypeScript cache
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Yarn Integrity file
|
||||||
|
.yarn-integrity
|
||||||
|
|
||||||
|
# dotenv environment variables file
|
||||||
|
.env
|
||||||
|
.env.test
|
||||||
|
|
||||||
|
# parcel-bundler cache (https://parceljs.org/)
|
||||||
|
.cache
|
||||||
|
|
||||||
|
# next.js build output
|
||||||
|
.next
|
||||||
|
|
||||||
|
# nuxt.js build output
|
||||||
|
.nuxt
|
||||||
|
|
||||||
|
# vuepress build output
|
||||||
|
.vuepress/dist
|
||||||
|
|
||||||
|
# Serverless directories
|
||||||
|
.serverless/
|
||||||
|
|
||||||
|
# FuseBox cache
|
||||||
|
.fusebox/
|
||||||
|
|
||||||
|
# DynamoDB Local files
|
||||||
|
.dynamodb/
|
||||||
|
|
||||||
|
# Webpack
|
||||||
|
.webpack/
|
||||||
|
|
||||||
|
# Vite
|
||||||
|
.vite/
|
||||||
|
|
||||||
|
# Electron-Forge
|
||||||
|
out/
|
||||||
54
forge.config.ts
Normal file
54
forge.config.ts
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import type { ForgeConfig } from '@electron-forge/shared-types';
|
||||||
|
import { MakerSquirrel } from '@electron-forge/maker-squirrel';
|
||||||
|
import { MakerZIP } from '@electron-forge/maker-zip';
|
||||||
|
import { MakerDeb } from '@electron-forge/maker-deb';
|
||||||
|
import { MakerRpm } from '@electron-forge/maker-rpm';
|
||||||
|
import { VitePlugin } from '@electron-forge/plugin-vite';
|
||||||
|
import { FusesPlugin } from '@electron-forge/plugin-fuses';
|
||||||
|
import { FuseV1Options, FuseVersion } from '@electron/fuses';
|
||||||
|
|
||||||
|
const config: ForgeConfig = {
|
||||||
|
packagerConfig: {
|
||||||
|
asar: true,
|
||||||
|
},
|
||||||
|
rebuildConfig: {},
|
||||||
|
makers: [new MakerSquirrel({}), new MakerZIP({}, ['darwin']), new MakerRpm({}), new MakerDeb({})],
|
||||||
|
plugins: [
|
||||||
|
new VitePlugin({
|
||||||
|
// `build` can specify multiple entry builds, which can be Main process, Preload scripts, Worker process, etc.
|
||||||
|
// If you are familiar with Vite configuration, it will look really familiar.
|
||||||
|
build: [
|
||||||
|
{
|
||||||
|
// `entry` is just an alias for `build.lib.entry` in the corresponding file of `config`.
|
||||||
|
entry: 'src/main.ts',
|
||||||
|
config: 'vite.main.config.ts',
|
||||||
|
target: 'main',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
entry: 'src/preload.ts',
|
||||||
|
config: 'vite.preload.config.ts',
|
||||||
|
target: 'preload',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
renderer: [
|
||||||
|
{
|
||||||
|
name: 'main_window',
|
||||||
|
config: 'vite.renderer.config.ts',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
// Fuses are used to enable/disable various Electron functionality
|
||||||
|
// at package time, before code signing the application
|
||||||
|
new FusesPlugin({
|
||||||
|
version: FuseVersion.V1,
|
||||||
|
[FuseV1Options.RunAsNode]: false,
|
||||||
|
[FuseV1Options.EnableCookieEncryption]: true,
|
||||||
|
[FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
|
||||||
|
[FuseV1Options.EnableNodeCliInspectArguments]: false,
|
||||||
|
[FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
|
||||||
|
[FuseV1Options.OnlyLoadAppFromAsar]: true,
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
1
forge.env.d.ts
vendored
Normal file
1
forge.env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
/// <reference types="@electron-forge/plugin-vite/forge-vite-env" />
|
||||||
52
index.html
Normal file
52
index.html
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src 'self' http://1.12.73.211:8848; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';">
|
||||||
|
<title>中国电信桌面应用</title>
|
||||||
|
<link rel="stylesheet" href="./src/index.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="app-container">
|
||||||
|
<header class="app-header">
|
||||||
|
<div class="header-left">
|
||||||
|
<h1>中国电信桌面应用</h1>
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<span id="userInfo"></span>
|
||||||
|
<button id="btnLogout" class="logout-btn">退出登录</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="app-main">
|
||||||
|
<nav class="sidebar">
|
||||||
|
<ul class="menu-list">
|
||||||
|
<li class="menu-item active" data-page="dashboard">
|
||||||
|
<i class="icon">📊</i>
|
||||||
|
<span>仪表盘</span>
|
||||||
|
</li>
|
||||||
|
<li class="menu-item" data-page="tasks">
|
||||||
|
<i class="icon">📝</i>
|
||||||
|
<span>任务管理</span>
|
||||||
|
</li>
|
||||||
|
<li class="menu-item" data-page="reports">
|
||||||
|
<i class="icon">📈</i>
|
||||||
|
<span>报表统计</span>
|
||||||
|
</li>
|
||||||
|
<li class="menu-item" data-page="settings">
|
||||||
|
<i class="icon">⚙️</i>
|
||||||
|
<span>系统设置</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="content-area">
|
||||||
|
<webview id="pageContent" class="page-content" style="width: 100%; height: 100%;" src="https://www.baidu.com" allowpopups webpreferences="contextIsolation=yes, nodeIntegration=no"></webview>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module" src="./src/index.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
26
login.html
Normal file
26
login.html
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>登录</title>
|
||||||
|
<link rel="stylesheet" href="./src/login.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="login-container">
|
||||||
|
<h2 class="login-title">系统登录</h2>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="txtAccount">账号</label>
|
||||||
|
<input type="text" id="txtAccount" placeholder="请输入账号" value="lilb">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="txtPassword">密码</label>
|
||||||
|
<input type="password" id="txtPassword" placeholder="请输入密码" value="EIAC0909">
|
||||||
|
</div>
|
||||||
|
<button id="btnLogin" class="login-btn">登录</button>
|
||||||
|
<div id="errorMessage" class="error-message"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module" src="./src/login.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
43
package.json
Normal file
43
package.json
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
{
|
||||||
|
"name": "china-telecom-app",
|
||||||
|
"productName": "china-telecom-app",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "My Electron application description",
|
||||||
|
"main": ".vite/build/main.js",
|
||||||
|
"scripts": {
|
||||||
|
"start": "electron-forge start",
|
||||||
|
"package": "electron-forge package",
|
||||||
|
"make": "electron-forge make",
|
||||||
|
"publish": "electron-forge publish",
|
||||||
|
"lint": "eslint --ext .ts,.tsx ."
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": {
|
||||||
|
"name": "Allen",
|
||||||
|
"email": "caizz520@gmail.com"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"devDependencies": {
|
||||||
|
"@electron-forge/cli": "^7.8.0",
|
||||||
|
"@electron-forge/maker-deb": "^7.8.0",
|
||||||
|
"@electron-forge/maker-rpm": "^7.8.0",
|
||||||
|
"@electron-forge/maker-squirrel": "^7.8.0",
|
||||||
|
"@electron-forge/maker-zip": "^7.8.0",
|
||||||
|
"@electron-forge/plugin-auto-unpack-natives": "^7.8.0",
|
||||||
|
"@electron-forge/plugin-fuses": "^7.8.0",
|
||||||
|
"@electron-forge/plugin-vite": "^7.8.0",
|
||||||
|
"@electron/fuses": "^1.8.0",
|
||||||
|
"@types/electron-squirrel-startup": "^1.0.2",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^5.62.0",
|
||||||
|
"@typescript-eslint/parser": "^5.62.0",
|
||||||
|
"electron": "36.0.0",
|
||||||
|
"eslint": "^8.57.1",
|
||||||
|
"eslint-plugin-import": "^2.31.0",
|
||||||
|
"ts-node": "^10.9.2",
|
||||||
|
"typescript": "~4.5.4",
|
||||||
|
"vite": "^5.4.18"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"electron-squirrel-startup": "^1.0.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
117
src/index.css
Normal file
117
src/index.css
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
/* 全局样式 */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Microsoft YaHei', sans-serif;
|
||||||
|
background-color: #f0f2f5;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 应用容器 */
|
||||||
|
.app-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 头部样式 */
|
||||||
|
.app-header {
|
||||||
|
background-color: #1890ff;
|
||||||
|
color: white;
|
||||||
|
padding: 0 20px;
|
||||||
|
height: 60px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left h1 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#userInfo {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout-btn {
|
||||||
|
background-color: transparent;
|
||||||
|
border: 1px solid white;
|
||||||
|
color: white;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout-btn:hover {
|
||||||
|
background-color: white;
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 主内容区域 */
|
||||||
|
.app-main {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 侧边栏样式 */
|
||||||
|
.sidebar {
|
||||||
|
width: 200px;
|
||||||
|
background-color: white;
|
||||||
|
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-list {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item {
|
||||||
|
padding: 12px 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item:hover {
|
||||||
|
background-color: #e6f7ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item.active {
|
||||||
|
background-color: #e6f7ff;
|
||||||
|
color: #1890ff;
|
||||||
|
border-right: 3px solid #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item .icon {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 内容区域 */
|
||||||
|
.content-area {
|
||||||
|
flex: 1;
|
||||||
|
padding: 20px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-content {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
100
src/index.ts
Normal file
100
src/index.ts
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
console.log('👋 This message is being logged by "index.ts", included via Vite');
|
||||||
|
|
||||||
|
// In this file you can include the rest of your app's specific main process
|
||||||
|
// code. You can also put them in separate files and import them here.
|
||||||
|
|
||||||
|
// 检查登录状态
|
||||||
|
function checkLoginStatus() {
|
||||||
|
const auth = document.cookie.split('; ').find(row => row.startsWith('EACToken=') || row.startsWith('MssSsoToken='));
|
||||||
|
if (!auth) {
|
||||||
|
window.location.href = 'login.html';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示用户信息
|
||||||
|
const userInfo = document.getElementById('userInfo');
|
||||||
|
if (userInfo) {
|
||||||
|
userInfo.textContent = '欢迎使用';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理退出登录
|
||||||
|
function handleLogout() {
|
||||||
|
document.cookie = 'expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
|
||||||
|
window.location.href = 'login.html';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理菜单切换
|
||||||
|
function handleMenuClick(event: Event) {
|
||||||
|
const target = event.target as HTMLElement;
|
||||||
|
const menuItem = target.closest('.menu-item');
|
||||||
|
|
||||||
|
if (menuItem) {
|
||||||
|
// 移除所有菜单项的active类
|
||||||
|
document.querySelectorAll('.menu-item').forEach(item => {
|
||||||
|
item.classList.remove('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 添加active类到当前点击的菜单项
|
||||||
|
menuItem.classList.add('active');
|
||||||
|
|
||||||
|
// 获取页面标识
|
||||||
|
const page = menuItem.getAttribute('data-page');
|
||||||
|
if (page) {
|
||||||
|
loadPageContent(page);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载页面内容
|
||||||
|
async function loadPageContent(page: string) {
|
||||||
|
const contentArea = document.getElementById('pageContent');
|
||||||
|
if (!contentArea) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 这里可以根据不同的页面加载不同的内容
|
||||||
|
switch (page) {
|
||||||
|
case 'dashboard':
|
||||||
|
contentArea.innerHTML = '<h2>仪表盘</h2><p>欢迎使用中国电信桌面应用</p>';
|
||||||
|
break;
|
||||||
|
case 'tasks':
|
||||||
|
contentArea.innerHTML = '<h2>任务管理</h2><p>任务管理功能开发中...</p>';
|
||||||
|
break;
|
||||||
|
case 'reports':
|
||||||
|
contentArea.innerHTML = '<h2>报表统计</h2><p>报表统计功能开发中...</p>';
|
||||||
|
break;
|
||||||
|
case 'settings':
|
||||||
|
contentArea.innerHTML = '<h2>系统设置</h2><p>系统设置功能开发中...</p>';
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
contentArea.innerHTML = '<h2>页面不存在</h2>';
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载页面内容失败:', error);
|
||||||
|
contentArea.innerHTML = '<h2>加载失败</h2><p>请稍后重试</p>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
function initialize() {
|
||||||
|
// 检查登录状态
|
||||||
|
checkLoginStatus();
|
||||||
|
|
||||||
|
// 绑定退出登录事件
|
||||||
|
const logoutBtn = document.getElementById('btnLogout');
|
||||||
|
if (logoutBtn) {
|
||||||
|
logoutBtn.addEventListener('click', handleLogout);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 绑定菜单点击事件
|
||||||
|
const menuList = document.querySelector('.menu-list');
|
||||||
|
if (menuList) {
|
||||||
|
menuList.addEventListener('click', handleMenuClick);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载默认页面（仪表盘）
|
||||||
|
loadPageContent('dashboard');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 当DOM加载完成后初始化
|
||||||
|
document.addEventListener('DOMContentLoaded', initialize);
|
||||||
63
src/login.css
Normal file
63
src/login.css
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
body {
|
||||||
|
font-family: 'Microsoft YaHei', sans-serif;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-container {
|
||||||
|
background-color: white;
|
||||||
|
padding: 30px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
width: 320px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-title {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-btn {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
background-color: #1890ff;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-btn:hover {
|
||||||
|
background-color: #40a9ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
color: #ff4d4f;
|
||||||
|
margin-top: 10px;
|
||||||
|
text-align: center;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
86
src/login.ts
Normal file
86
src/login.ts
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
// 登录请求参数
|
||||||
|
interface LoginRequest {
|
||||||
|
Account: string;
|
||||||
|
Password: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 登录响应数据
|
||||||
|
interface LoginResponse {
|
||||||
|
IsNeedSendSMS: boolean;
|
||||||
|
Token: string;
|
||||||
|
Cookies: Array<{ Key: string, Value: string }>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// API 响应类型
|
||||||
|
interface ApiResponse<T = any> {
|
||||||
|
status: number;
|
||||||
|
code: number;
|
||||||
|
msg: string;
|
||||||
|
data: T;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 设置Cookie的示例
|
||||||
|
const setCookies = async (cookieString: string) => {
|
||||||
|
try {
|
||||||
|
await window.electronAPI.setCookie(cookieString);
|
||||||
|
console.log('Cookies设置成功');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('设置Cookies失败:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 使用示例
|
||||||
|
// setCookies('key1=value1; key2=value2; key3=value3');
|
||||||
|
|
||||||
|
// 登录处理函数
|
||||||
|
async function handleLogin(account: string, password: string): Promise<void> {
|
||||||
|
const errorMessage = document.getElementById('errorMessage') as HTMLDivElement;
|
||||||
|
|
||||||
|
if (!account || !password) {
|
||||||
|
errorMessage.style.display = 'block';
|
||||||
|
errorMessage.textContent = '请输入账号和密码';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('http://1.12.73.211:8848/EIAC_Desktop_Api/api/Auth/Login', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json; charset=utf-8'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
Account: account,
|
||||||
|
Password: password
|
||||||
|
} as LoginRequest)
|
||||||
|
});
|
||||||
|
|
||||||
|
const rspBody = await response.json() as ApiResponse<LoginResponse>;
|
||||||
|
|
||||||
|
if (rspBody.status !== 0) {
|
||||||
|
errorMessage.style.display = 'block';
|
||||||
|
errorMessage.textContent = rspBody.msg || '登录失败';
|
||||||
|
} else {
|
||||||
|
// 登录成功，将data.Cookies拼接为字符串，存储cookie
|
||||||
|
const cookies = rspBody.data.Cookies.map(cookie => `${cookie.Key.trim()}=${cookie.Value.trim()}`).join('; ');
|
||||||
|
await setCookies(cookies);
|
||||||
|
// 跳转到主页面
|
||||||
|
window.location.href = 'index.html';
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
errorMessage.style.display = 'block';
|
||||||
|
errorMessage.textContent = '网络错误，请稍后重试';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 页面加载完成后绑定事件
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const loginButton = document.getElementById('btnLogin');
|
||||||
|
if (loginButton) {
|
||||||
|
loginButton.addEventListener('click', () => {
|
||||||
|
const account = (document.getElementById('txtAccount') as HTMLInputElement).value;
|
||||||
|
const password = (document.getElementById('txtPassword') as HTMLInputElement).value;
|
||||||
|
handleLogin(account, password);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
79
src/main.ts
Normal file
79
src/main.ts
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
import { app, BrowserWindow, ipcMain } from 'electron';
|
||||||
|
import path from 'node:path';
|
||||||
|
import started from 'electron-squirrel-startup';
|
||||||
|
|
||||||
|
// Handle creating/removing shortcuts on Windows when installing/uninstalling.
|
||||||
|
if (started) {
|
||||||
|
app.quit();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理设置Cookie的IPC请求
|
||||||
|
ipcMain.handle('set-cookie', async (event, cookie) => {
|
||||||
|
try {
|
||||||
|
await event.sender.session.cookies.set(cookie);
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('设置Cookie失败:', error);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const createWindow = () => {
|
||||||
|
// Create the browser window.
|
||||||
|
const win = new BrowserWindow({
|
||||||
|
width: 800,
|
||||||
|
height: 600,
|
||||||
|
webPreferences: {
|
||||||
|
contextIsolation: true, // 启用上下文隔离。
|
||||||
|
nodeIntegration: false, // 禁用 Node.js 集成，提高安全性。
|
||||||
|
preload: path.join(__dirname, 'preload.js'), // 预加载脚本
|
||||||
|
webviewTag: true, // 启用webview标签
|
||||||
|
webSecurity: false,
|
||||||
|
allowRunningInsecureContent: true,
|
||||||
|
sandbox: false
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 设置session
|
||||||
|
win.webContents.session.setPermissionRequestHandler((webContents, permission, callback) => {
|
||||||
|
callback(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
win.setMenuBarVisibility(false); // 隐藏菜单栏
|
||||||
|
win.setAutoHideMenuBar(true); // 自动隐藏菜单栏
|
||||||
|
win.setMenu(null); // 隐藏菜单栏
|
||||||
|
|
||||||
|
// and load the index.html of the app.
|
||||||
|
if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
|
||||||
|
win.loadURL(`${MAIN_WINDOW_VITE_DEV_SERVER_URL}/login.html`);
|
||||||
|
} else {
|
||||||
|
win.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/login.html`));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Open the DevTools.
|
||||||
|
win.webContents.openDevTools();
|
||||||
|
};
|
||||||
|
|
||||||
|
// This method will be called when Electron has finished
|
||||||
|
// initialization and is ready to create browser windows.
|
||||||
|
// Some APIs can only be used after this event occurs.
|
||||||
|
app.on('ready', createWindow);
|
||||||
|
|
||||||
|
// 在非 macOS 平台上，关闭所有窗口时退出应用
|
||||||
|
// Quit when all windows are closed, except on macOS. There, it's common
|
||||||
|
// for applications and their menu bar to stay active until the user quits
|
||||||
|
// explicitly with Cmd + Q.
|
||||||
|
app.on('window-all-closed', () => {
|
||||||
|
if (process.platform !== 'darwin') {
|
||||||
|
app.quit();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 在 macOS 平台上，点击 dock 图标时重新创建窗口
|
||||||
|
app.on('activate', () => {
|
||||||
|
// On OS X it's common to re-create a window in the app when the
|
||||||
|
// dock icon is clicked and there are no other windows open.
|
||||||
|
if (BrowserWindow.getAllWindows().length === 0) {
|
||||||
|
createWindow();
|
||||||
|
}
|
||||||
|
});
|
||||||
37
src/preload.ts
Normal file
37
src/preload.ts
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
// See the Electron documentation for details on how to use preload scripts:
|
||||||
|
// https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts
|
||||||
|
|
||||||
|
import { contextBridge, ipcRenderer } from 'electron';
|
||||||
|
|
||||||
|
contextBridge.exposeInMainWorld('electronAPI', {
|
||||||
|
setCookie: async (cookieString: string) => {
|
||||||
|
const cookies = cookieString.split(';').map(cookie => {
|
||||||
|
const [name, value] = cookie.trim().split('=');
|
||||||
|
return {
|
||||||
|
name: name.trim(),
|
||||||
|
value: value.trim(),
|
||||||
|
path: '/',
|
||||||
|
secure: false,
|
||||||
|
httpOnly: false,
|
||||||
|
expirationDate: Math.floor(Date.now() / 1000) + 86400 // 24小时后过期
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// 为每个域名设置Cookie
|
||||||
|
const domains = ['localhost', '1.12.73.211'];
|
||||||
|
const ports = ['', ':8848'];
|
||||||
|
|
||||||
|
for (const cookie of cookies) {
|
||||||
|
for (const domain of domains) {
|
||||||
|
for (const port of ports) {
|
||||||
|
const url = `http://${domain}${port}`;
|
||||||
|
await ipcRenderer.invoke('set-cookie', {
|
||||||
|
...cookie,
|
||||||
|
url,
|
||||||
|
domain
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
9
src/types/electron.d.ts
vendored
Normal file
9
src/types/electron.d.ts
vendored
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
export interface ElectronAPI {
|
||||||
|
setCookie: (cookieString: string) => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface Window {
|
||||||
|
electronAPI: ElectronAPI;
|
||||||
|
}
|
||||||
|
}
|
||||||
16
tsconfig.json
Normal file
16
tsconfig.json
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ESNext",
|
||||||
|
"module": "commonjs",
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"noImplicitAny": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"outDir": "dist",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"removeComments": true
|
||||||
|
}
|
||||||
|
}
|
||||||
4
vite.main.config.ts
Normal file
4
vite.main.config.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import { defineConfig } from 'vite';
|
||||||
|
|
||||||
|
// https://vitejs.dev/config
|
||||||
|
export default defineConfig({});
|
||||||
4
vite.preload.config.ts
Normal file
4
vite.preload.config.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import { defineConfig } from 'vite';
|
||||||
|
|
||||||
|
// https://vitejs.dev/config
|
||||||
|
export default defineConfig({});
|
||||||
13
vite.renderer.config.ts
Normal file
13
vite.renderer.config.ts
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { defineConfig } from 'vite';
|
||||||
|
|
||||||
|
// https://vitejs.dev/config
|
||||||
|
export default defineConfig({
|
||||||
|
build: {
|
||||||
|
rollupOptions: {
|
||||||
|
input: {
|
||||||
|
login: 'login.html',
|
||||||
|
index: 'index.html'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user