feat: 初始化船长·HeiXiu 桌面应用项目(错误是svg的问题)
Electron + React 19 + TypeScript + Ant Design 6 + Tailwind CSS 4 【核心架构】 - Electron 主进程(窗口管理、平台检测、图标适配) - Vite 构建链(双产物 dist/ + dist-electron/) - 共享层 shared/(类型、常量、工具函数) - IPC 通信框架 + 安全守卫 【主题系统】 - 蓝紫渐变主题(亮色/暗色双模式) - Ant Design ConfigProvider 适配(lightAlgorithm / darkAlgorithm) - Tailwind CSS 4 @theme 指令 + CSS 变量 - 设计令牌三处同步(tokens.ts / globals.css / antd-theme.ts) 【导航栏】 - 自定义 H5 导航栏替代系统菜单 - 个人版/企业版双布局 - 未登录拦截 + 事件总线驱动登录弹窗 【登录注册】 - Modal 弹层(Portal)+ Tabs 切换 - 登录/注册表单动态字段渲染 - 记住密码 / 自动登录 / 用户协议 【更新系统】 - 自定义 API 版本检查(替代 electron-updater generic provider) - 手动下载 + SHA512 校验 + spawn NSIS 安装 - 渲染进程更新状态机 Hook(useUpdater) - 检查更新按钮 + 下载进度展示 【构建工具链】 - build.mjs 构建总管(--win/--mac/--linux --personal/--enterprise --build/--clean/--sign/--upload/--publish) - scripts/ 自动化脚本(clean / generate-update-info / upload-oss / publish-release) - electron-builder NSIS 安装器(可选路径、多版本打包) - update-info.json 自动生成(fileSize/sha512/changelog/releaseDate) 【代码质量】 - ESLint + TypeScript strict + Prettier - husky + lint-staged(提交前自动检查) - commitlint(规范提交信息) - Playwright E2E + Vitest 单元测试框架 - rollup-plugin-visualizer 打包体积分析 【文档】 - README.md(快速开始 + 目录结构 + 命令速查) - UpdateA.md(发布手册:API/签名/发版流程/数据库) - CHANGELOG.md(更新日志) - .env.example(构建环境变量模板)
This commit is contained in:
131
src/pages/login/hooks/use-auth-state.ts
Normal file
131
src/pages/login/hooks/use-auth-state.ts
Normal file
@@ -0,0 +1,131 @@
|
||||
// ============================================================
|
||||
// useAuthState — 记住密码 / 自动登录 状态管理
|
||||
// 持久化到 localStorage,下次打开页面自动回填
|
||||
// ============================================================
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
|
||||
const STORAGE_KEY = 'ele-heixiu-auth';
|
||||
|
||||
interface StoredAuth {
|
||||
/** 上次登录的用户名 */
|
||||
username: string;
|
||||
/** 加密后的密码(Base64 编码,非安全加密,仅方便回填) */
|
||||
password: string;
|
||||
/** 是否记住密码 */
|
||||
remember: boolean;
|
||||
/** 是否自动登录 */
|
||||
autoLogin: boolean;
|
||||
}
|
||||
|
||||
/** 简单 Base64 编解码(非安全加密,仅避免明文存储) */
|
||||
function encode(str: string): string {
|
||||
try {
|
||||
return btoa(decodeURI(encodeURIComponent(str)));
|
||||
} catch {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
function decode(str: string): string {
|
||||
try {
|
||||
return decodeURIComponent(decodeURI(atob(str)));
|
||||
} catch {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
/** 从 localStorage 读取已保存的认证信息 */
|
||||
function readAuth(): StoredAuth | null {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
if (!raw) return null;
|
||||
return JSON.parse(raw) as StoredAuth;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/** 写入 localStorage */
|
||||
function writeAuth(auth: StoredAuth): void {
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(auth));
|
||||
} catch {
|
||||
/* 静默 */
|
||||
}
|
||||
}
|
||||
|
||||
/** 清除 localStorage */
|
||||
function clearAuth(): void {
|
||||
try {
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
} catch {
|
||||
/* 静默 */
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- Hook ----------
|
||||
|
||||
export function useAuthState() {
|
||||
// 初始化:从 localStorage 恢复
|
||||
const [username, setUsername] = useState(() => readAuth()?.username || '');
|
||||
const [password, setPassword] = useState(() => {
|
||||
const auth = readAuth();
|
||||
return auth?.remember ? decode(auth.password) : '';
|
||||
});
|
||||
const [remember, setRemember] = useState(() => readAuth()?.remember || false);
|
||||
const [autoLogin, setAutoLogin] = useState(() => readAuth()?.autoLogin || false);
|
||||
|
||||
// 勾选"记住密码"变化时持久化
|
||||
const handleRememberChange = useCallback((checked: boolean) => {
|
||||
setRemember(checked);
|
||||
if (!checked) {
|
||||
// 取消记住密码 → 同时取消自动登录
|
||||
setAutoLogin(false);
|
||||
clearAuth();
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 勾选"自动登录"变化时持久化
|
||||
const handleAutoLoginChange = useCallback((checked: boolean) => {
|
||||
setAutoLogin(checked);
|
||||
}, []);
|
||||
|
||||
// 登录成功后保存
|
||||
const saveAuth = useCallback(
|
||||
(user: string, pass: string) => {
|
||||
setUsername(user);
|
||||
if (remember) {
|
||||
setPassword(pass);
|
||||
writeAuth({
|
||||
username: user,
|
||||
password: encode(pass),
|
||||
remember,
|
||||
autoLogin,
|
||||
});
|
||||
}
|
||||
},
|
||||
[remember, autoLogin],
|
||||
);
|
||||
|
||||
// 清除保存的认证信息
|
||||
const clearSavedAuth = useCallback(() => {
|
||||
setUsername('');
|
||||
setPassword('');
|
||||
setRemember(false);
|
||||
setAutoLogin(false);
|
||||
clearAuth();
|
||||
}, []);
|
||||
|
||||
return {
|
||||
username,
|
||||
password,
|
||||
remember,
|
||||
autoLogin,
|
||||
setUsername,
|
||||
setPassword,
|
||||
handleRememberChange,
|
||||
handleAutoLoginChange,
|
||||
saveAuth,
|
||||
clearSavedAuth,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user