feat: 实现设置页面 + 路由系统 + JWT认证体系 + 公告优化 + 错误类型系统
## 新增功能 ### 设置页面（Router + Modal 叠加） - HashRouter 路由系统，Electron file:// 协议兼容 - 设置页以居中 Modal 叠加首页，仅 X 按钮关闭 - 主题切换 Segmented 控件（与首页 Switch 共享 Context） - 大模型产物存储仓库路径配置（原生文件夹选择对话框） - 企业版额外：团队创作存储仓库路径 - 系统信息展示（平台/版本/版本类型/环境） - 版本更新检查（状态机：idle→checking→no-update/available→downloading→downloaded→error） ### JWT 认证体系 - 双 Token 机制：access_token + refresh_token - Axios 拦截器 401 自动刷新 + 并发请求去重队列 - 启动时 refresh_token 静默续期（自动登录） - 记住密码：Base64 编码存储，表单自动回填 - setTokenRefreshHandler 解耦模式：request.ts 不知晓 auth ### 自定义错误类型系统 - RefreshError 继承 RequestError，type = AUTH_EXPIRED - 全局拦截器捕获 RefreshError → 自动 clearToken + AUTH_REQUIRED - 任何位置 throw new RefreshError() 即可触发登录 Modal ### 公告卡片优化 - 长文本 Tooltip 悬浮预览 - 点击卡片弹出详情 Modal（全文保留换行） ### SettingsContext（类似 Vue Pinia） - 集中式设置状态管理 - localStorage 持久化：ele-heixiu-output-path / ele-heixiu-team-repo-path - useSettings() 全局消费 ## 架构变更 - App.tsx → HashRouter + AppRoutes + LoginPage 弹层 - Layout.tsx = NavBar + <Outlet /> 页面壳 - HomePage.tsx 从 App.tsx 提取 - NavBar 使用 useNavigate() 真实路由导航 - useUpdater 改为模块级单例 IPC 监听器（修复 MaxListenersExceededWarning） - electron/main.ts 新增 FILE_DIALOG IPC handler ## 依赖 - 新增 react-router-dom
This commit is contained in:
277
src/pages/home/HomePage.tsx
Normal file
277
src/pages/home/HomePage.tsx
Normal file
@@ -0,0 +1,277 @@
|
||||
// ============================================================
|
||||
// HomePage — 首页仪表盘（从 App.tsx 提取）
|
||||
// ============================================================
|
||||
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Space,
|
||||
Tag,
|
||||
Typography,
|
||||
Switch as AntSwitch,
|
||||
Slider,
|
||||
Progress,
|
||||
theme as antTheme,
|
||||
} from 'antd';
|
||||
import {
|
||||
ApiOutlined,
|
||||
ThunderboltOutlined,
|
||||
BulbOutlined,
|
||||
BulbFilled,
|
||||
DownloadOutlined,
|
||||
SyncOutlined,
|
||||
CheckCircleOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
RocketOutlined,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
import { getPlatformName, isDev } from '@/utils/platform';
|
||||
import { gradientPrimary } from '@/theme/tokens';
|
||||
import { useTheme } from '@/hooks/use-theme';
|
||||
import { useUpdater } from '@/hooks/use-updater';
|
||||
import { useAppContext } from '@/contexts/app-context';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
export function HomePage() {
|
||||
const { isDark, toggleTheme } = useTheme();
|
||||
const { platform, edition, isLoggedIn, logout } = useAppContext();
|
||||
const { token } = antTheme.useToken();
|
||||
const [progress, setProgress] = useState(65);
|
||||
const {
|
||||
status: updateStatus,
|
||||
progress: updateProgress,
|
||||
info: updateInfo,
|
||||
error: updateError,
|
||||
checkForUpdates,
|
||||
installUpdate,
|
||||
} = useUpdater();
|
||||
|
||||
return (
|
||||
<div className="flex-1 p-8">
|
||||
<div className="mx-auto max-w-4xl space-y-6">
|
||||
{/* ---- 标题区 + 主题开关 ---- */}
|
||||
<div className="text-center space-y-2">
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
<Title level={1} className="mb-0! gradient-primary-text">
|
||||
HeiXiu · 桌面工作台
|
||||
</Title>
|
||||
<AntSwitch
|
||||
checked={isDark}
|
||||
onChange={toggleTheme}
|
||||
checkedChildren={<BulbFilled />}
|
||||
unCheckedChildren={<BulbOutlined />}
|
||||
title={isDark ? '切换亮色模式' : '切换暗色模式'}
|
||||
/>
|
||||
</div>
|
||||
<Text type="secondary">
|
||||
Electron + React 19 + TypeScript + Ant Design + Tailwind CSS
|
||||
</Text>
|
||||
<br />
|
||||
<Space size={4}>
|
||||
<Tag color={isDark ? 'blue' : 'purple'}>
|
||||
{isDark ? '🌙 暗色' : '☀️ 亮色'}
|
||||
</Tag>
|
||||
<Tag color={edition === 'enterprise' ? 'gold' : 'green'}>
|
||||
{edition === 'enterprise' ? '企业版' : '个人版'}
|
||||
</Tag>
|
||||
{isLoggedIn ? (
|
||||
<>
|
||||
<Tag color="blue">已登录</Tag>
|
||||
<Button size="small" type="link" danger onClick={logout}>
|
||||
退出登录
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Tag color="default">未登录</Tag>
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{/* ---- 导航栏状态提示 ---- */}
|
||||
<Card size="small" variant="borderless" className="rounded-lg">
|
||||
<Text type="secondary" className="text-xs">
|
||||
💡 当前使用 <Text strong>H5 自定义导航栏</Text> 替代系统菜单。
|
||||
{platform === 'darwin'
|
||||
? ' macOS 保留了最小 Edit 菜单以支持 Cmd+C/V 等快捷键。'
|
||||
: ' Windows/Linux 已完全移除系统菜单栏。'}
|
||||
</Text>
|
||||
</Card>
|
||||
|
||||
{/* ---- 主题色预览 ---- */}
|
||||
<Card
|
||||
title="🎨 蓝紫渐变主题色预览"
|
||||
variant="borderless"
|
||||
className="rounded-lg shadow-lg"
|
||||
>
|
||||
<Space orientation="vertical" size="large" className="w-full">
|
||||
{/* 渐变展示 */}
|
||||
<div>
|
||||
<Text strong>品牌渐变</Text>
|
||||
<div className="flex gap-3 mt-2">
|
||||
<div
|
||||
className="flex-1 h-16 rounded-lg flex items-center justify-center text-white font-medium shadow-md"
|
||||
style={{ background: gradientPrimary }}
|
||||
>
|
||||
135° 渐变
|
||||
</div>
|
||||
<div
|
||||
className="flex-1 h-16 rounded-lg flex items-center justify-center text-white font-medium shadow-md"
|
||||
style={{ background: 'linear-gradient(90deg, #4F46E5, #7C3AED)' }}
|
||||
>
|
||||
90° 渐变
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 组件示例 */}
|
||||
<div>
|
||||
<Text strong>Ant Design 组件</Text>
|
||||
<Space wrap className="mt-2">
|
||||
<Button type="primary" icon={<ThunderboltOutlined />}>
|
||||
主按钮
|
||||
</Button>
|
||||
<Button>默认</Button>
|
||||
<Button type="dashed">虚线</Button>
|
||||
<Button type="text">文字</Button>
|
||||
<Button type="link">链接</Button>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{/* 滑块 + 进度条 */}
|
||||
<div>
|
||||
<Text strong>交互组件</Text>
|
||||
<div className="flex items-center gap-4 mt-2">
|
||||
<span className="text-sm" style={{ color: token.colorTextSecondary }}>
|
||||
进度:
|
||||
</span>
|
||||
<Slider
|
||||
className="flex-1"
|
||||
value={progress}
|
||||
onChange={setProgress}
|
||||
min={0}
|
||||
max={100}
|
||||
/>
|
||||
<Progress
|
||||
type="circle"
|
||||
percent={progress}
|
||||
size={48}
|
||||
strokeColor={{ '0%': '#4F46E5', '100%': '#7C3AED' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Space>
|
||||
</Card>
|
||||
|
||||
{/* ---- 平台信息 ---- */}
|
||||
<Card title="🖥️ 系统信息" variant="borderless" className="rounded-lg shadow-lg">
|
||||
<Space orientation="vertical" size="middle" className="w-full">
|
||||
<div className="flex items-center gap-2">
|
||||
<ApiOutlined style={{ color: token.colorPrimary }} />
|
||||
<Text strong>运行平台：</Text>
|
||||
<Tag color="purple">{getPlatformName()}</Tag>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<ApiOutlined style={{ color: token.colorPrimary }} />
|
||||
<Text strong>运行环境：</Text>
|
||||
<Tag color={isDev() ? 'blue' : 'green'}>
|
||||
{isDev() ? '开发模式' : '生产模式'}
|
||||
</Tag>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<ApiOutlined style={{ color: token.colorPrimary }} />
|
||||
<Text strong>当前导航：</Text>
|
||||
<Tag color="purple">
|
||||
H5 自定义导航栏（{edition === 'enterprise' ? '企业版' : '个人版'}
|
||||
布局）
|
||||
</Tag>
|
||||
</div>
|
||||
</Space>
|
||||
</Card>
|
||||
|
||||
{/* ---- 版本更新 ---- */}
|
||||
<Card title="🔄 版本更新" variant="borderless" className="rounded-lg shadow-lg">
|
||||
<Space orientation="vertical" size="middle" className="w-full">
|
||||
{/* 状态提示 */}
|
||||
{updateStatus === 'checking' && (
|
||||
<div className="flex items-center gap-2">
|
||||
<SyncOutlined spin style={{ color: token.colorPrimary }} />
|
||||
<Text type="secondary">正在检查更新...</Text>
|
||||
</div>
|
||||
)}
|
||||
{updateStatus === 'no-update' && (
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircleOutlined style={{ color: token.colorSuccess }} />
|
||||
<Text type="success">已是最新版本</Text>
|
||||
</div>
|
||||
)}
|
||||
{updateStatus === 'error' && (
|
||||
<div className="flex items-center gap-2">
|
||||
<ExclamationCircleOutlined style={{ color: token.colorError }} />
|
||||
<Text type="danger">{updateError?.message || '检查更新失败'}</Text>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 发现新版本 */}
|
||||
{(updateStatus === 'available' || updateStatus === 'downloading') && (
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
<RocketOutlined style={{ color: token.colorPrimary }} />
|
||||
<Text strong>发现新版本：{updateInfo?.version}</Text>
|
||||
{updateInfo?.forceUpdate && <Tag color="red">强制更新</Tag>}
|
||||
</div>
|
||||
{updateInfo?.releaseNotes && (
|
||||
<Text type="secondary" className="text-xs whitespace-pre-line">
|
||||
{updateInfo.releaseNotes}
|
||||
</Text>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 下载进度 */}
|
||||
{updateStatus === 'downloading' && (
|
||||
<Progress
|
||||
percent={updateProgress.percent}
|
||||
strokeColor={{ '0%': '#4F46E5', '100%': '#7C3AED' }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 下载完成 */}
|
||||
{updateStatus === 'downloaded' && (
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircleOutlined style={{ color: token.colorSuccess }} />
|
||||
<Text>更新已下载完毕，点击按钮安装并重启</Text>
|
||||
</div>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<DownloadOutlined />}
|
||||
onClick={installUpdate}
|
||||
>
|
||||
安装更新
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Button
|
||||
icon={<SyncOutlined spin={updateStatus === 'checking'} />}
|
||||
onClick={checkForUpdates}
|
||||
disabled={updateStatus === 'checking'}
|
||||
>
|
||||
检查更新
|
||||
</Button>
|
||||
{isDev() && (
|
||||
<Text type="secondary" className="text-xs">
|
||||
（生产环境启动 5 秒后自动检查）
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
</Space>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,11 @@
|
||||
// ============================================================
|
||||
// useAuthState — 记住密码 / 自动登录 状态管理
|
||||
// 持久化到 localStorage，下次打开页面自动回填
|
||||
// useAuthState — 记住账号 / 记住密码 / 自动登录 状态管理
|
||||
//
|
||||
// "记住密码"：下次打开页面自动回填用户名 + 密码（Base64 编码）
|
||||
// "自动登录"：登录成功时标记，AppProvider 启动时用 refresh_token 静默续期
|
||||
//
|
||||
// 注意：密码 Base64 仅作基本混淆，非安全加密。
|
||||
// 安全性由 refresh_token + access_token 的 JWT 双重机制保障。
|
||||
// ============================================================
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
@@ -8,33 +13,16 @@ import { useState, useCallback } from 'react';
|
||||
const STORAGE_KEY = 'ele-heixiu-auth';
|
||||
|
||||
interface StoredAuth {
|
||||
/** 上次登录的用户名 */
|
||||
/** 上次登录的用户名（表单回填用） */
|
||||
username: string;
|
||||
/** 加密后的密码（Base64 编码，非安全加密，仅方便回填） */
|
||||
password: string;
|
||||
/** 是否记住密码 */
|
||||
/** 密码的 Base64 编码（仅"记住密码"勾选时存储） */
|
||||
passwordBase64?: string;
|
||||
/** 是否记住密码（勾选后表单自动回填用户名+密码） */
|
||||
remember: boolean;
|
||||
/** 是否自动登录 */
|
||||
/** 是否勾选了自动登录（AppProvider 据此决定启动时是否刷新 token） */
|
||||
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);
|
||||
@@ -45,7 +33,6 @@ function readAuth(): StoredAuth | null {
|
||||
}
|
||||
}
|
||||
|
||||
/** 写入 localStorage */
|
||||
function writeAuth(auth: StoredAuth): void {
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(auth));
|
||||
@@ -54,8 +41,33 @@ function writeAuth(auth: StoredAuth): void {
|
||||
}
|
||||
}
|
||||
|
||||
/** 清除 localStorage */
|
||||
function clearAuth(): void {
|
||||
// ---------- 工具函数（不依赖 React，AppProvider 可直接调用）----------
|
||||
|
||||
/** 读取自动登录标记 */
|
||||
export function getAutoLoginFlag(): boolean {
|
||||
return readAuth()?.autoLogin || false;
|
||||
}
|
||||
|
||||
/** 读取存储的密码（Base64 解码后返回明文，表单回填用） */
|
||||
export function getStoredPassword(): string {
|
||||
const auth = readAuth();
|
||||
if (!auth?.passwordBase64) return '';
|
||||
try {
|
||||
return atob(auth.passwordBase64);
|
||||
} catch {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
/** 仅清除自动登录标记（保留用户名和密码，下次还能回填表单） */
|
||||
export function clearAutoLoginFlag(): void {
|
||||
const auth = readAuth();
|
||||
if (!auth) return;
|
||||
writeAuth({ ...auth, autoLogin: false });
|
||||
}
|
||||
|
||||
/** 清除所有保存的认证信息 */
|
||||
export function clearSavedAuth(): void {
|
||||
try {
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
} catch {
|
||||
@@ -66,66 +78,64 @@ function clearAuth(): void {
|
||||
// ---------- 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 saved = readAuth();
|
||||
|
||||
const [username, setUsername] = useState(saved?.username || '');
|
||||
// 密码不存 state，直接从 localStorage 读取，避免 stale closure 问题
|
||||
const [remember, setRemember] = useState(saved?.remember || false);
|
||||
const [autoLogin, setAutoLogin] = useState(saved?.autoLogin || false);
|
||||
|
||||
// 勾选"记住密码"变化时持久化
|
||||
const handleRememberChange = useCallback((checked: boolean) => {
|
||||
setRemember(checked);
|
||||
if (!checked) {
|
||||
// 取消记住密码 → 同时取消自动登录
|
||||
setAutoLogin(false);
|
||||
clearAuth();
|
||||
clearSavedAuth();
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 勾选"自动登录"变化时持久化
|
||||
const handleAutoLoginChange = useCallback((checked: boolean) => {
|
||||
setAutoLogin(checked);
|
||||
}, []);
|
||||
|
||||
// 登录成功后保存
|
||||
/**
|
||||
* 登录成功后调用。
|
||||
* 参数由调用方（LoginPage）直接从表单值传入，避免 useCallback 的 stale closure。
|
||||
*
|
||||
* @param user - 用户名
|
||||
* @param password - 明文密码（仅在"记住密码"勾选时存储，Base64 编码）
|
||||
* @param doRemember - 是否勾选"记住密码"
|
||||
* @param doAutoLogin - 是否勾选"自动登录"
|
||||
*/
|
||||
const saveAuth = useCallback(
|
||||
(user: string, pass: string) => {
|
||||
(user: string, password: string, doRemember: boolean, doAutoLogin: boolean) => {
|
||||
setUsername(user);
|
||||
if (remember) {
|
||||
setPassword(pass);
|
||||
writeAuth({
|
||||
if (doRemember || doAutoLogin) {
|
||||
const payload: StoredAuth = {
|
||||
username: user,
|
||||
password: encode(pass),
|
||||
remember,
|
||||
autoLogin,
|
||||
});
|
||||
remember: doRemember,
|
||||
autoLogin: doAutoLogin,
|
||||
};
|
||||
// 仅在勾选"记住密码"时存储密码
|
||||
if (doRemember && password) {
|
||||
try {
|
||||
payload.passwordBase64 = btoa(password);
|
||||
} catch {
|
||||
/* Base64 编码失败则放弃存储密码 */
|
||||
}
|
||||
}
|
||||
writeAuth(payload);
|
||||
}
|
||||
},
|
||||
[remember, autoLogin],
|
||||
[],
|
||||
);
|
||||
|
||||
// 清除保存的认证信息
|
||||
const clearSavedAuth = useCallback(() => {
|
||||
setUsername('');
|
||||
setPassword('');
|
||||
setRemember(false);
|
||||
setAutoLogin(false);
|
||||
clearAuth();
|
||||
}, []);
|
||||
|
||||
return {
|
||||
username,
|
||||
password,
|
||||
remember,
|
||||
autoLogin,
|
||||
setUsername,
|
||||
setPassword,
|
||||
handleRememberChange,
|
||||
handleAutoLoginChange,
|
||||
saveAuth,
|
||||
clearSavedAuth,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -14,7 +14,9 @@ import { useAppContext } from '@/contexts/app-context.ts';
|
||||
import { useTheme } from '@/hooks/use-theme.ts';
|
||||
import { LoginForm } from './components/LoginForm';
|
||||
import { RegisterForm } from './components/RegisterForm';
|
||||
import { useAuthState } from './hooks/use-auth-state';
|
||||
import { useAuthState, getStoredPassword } from './hooks/use-auth-state';
|
||||
import {AuthAPI, LoginResponseBody} from '@/services/modules';
|
||||
import { getDeviceId } from '@/utils/device';
|
||||
import type { LoginFormValues, RegisterFormValues } from './types';
|
||||
|
||||
const { Text } = Typography;
|
||||
@@ -41,14 +43,23 @@ export function LoginPage({ open, onClose }: LoginPageProps) {
|
||||
async (values: LoginFormValues) => {
|
||||
setSubmitting(true);
|
||||
try {
|
||||
// TODO: 接入登录 API
|
||||
console.log('[Login]', values);
|
||||
authState.saveAuth(values.username, values.password);
|
||||
message.success('登录成功（Demo）');
|
||||
login();
|
||||
const auth:LoginResponseBody = await AuthAPI.login({
|
||||
username: values.username,
|
||||
password: values.password,
|
||||
device_id: getDeviceId(),
|
||||
user_ip: '',
|
||||
});
|
||||
|
||||
// 记住偏好（密码 Base64 编码，自动登录靠 refresh_token）
|
||||
authState.saveAuth(values.username, values.password, values.remember, values.autoLogin);
|
||||
|
||||
// 更新全局登录态（内部完成 setToken + emit LOGIN_SUCCESS）
|
||||
login(auth);
|
||||
|
||||
message.success(`登录成功，欢迎 ${auth.display_name || auth.username}`);
|
||||
onClose();
|
||||
} catch (err) {
|
||||
message.error((err as Error).message || '登录失败');
|
||||
message.error((err as Error).message || '登录失败，请检查用户名和密码');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
@@ -62,8 +73,17 @@ export function LoginPage({ open, onClose }: LoginPageProps) {
|
||||
async (values: RegisterFormValues) => {
|
||||
setSubmitting(true);
|
||||
try {
|
||||
console.log('[Register]', values);
|
||||
message.success('注册成功（Demo），请登录');
|
||||
await AuthAPI.register({
|
||||
username: values.username,
|
||||
password: values.password,
|
||||
phone: values.phone,
|
||||
sms_code: values.sms_code,
|
||||
device_id: values.device_id || getDeviceId(),
|
||||
device_label: values.device_label || '',
|
||||
display_name: values.display_name || '',
|
||||
referral_code: values.referral_code || '',
|
||||
});
|
||||
message.success('注册成功，请登录');
|
||||
setActiveTab('login');
|
||||
} catch (err) {
|
||||
message.error((err as Error).message || '注册失败');
|
||||
@@ -75,9 +95,13 @@ export function LoginPage({ open, onClose }: LoginPageProps) {
|
||||
);
|
||||
|
||||
const handleSendSms = useCallback(
|
||||
(phone: string) => {
|
||||
console.log('[SMS]', phone);
|
||||
message.info(`验证码已发送到 ${phone}（Demo）`);
|
||||
async (phone: string) => {
|
||||
try {
|
||||
await AuthAPI.sendSms({ phone });
|
||||
message.success('验证码已发送');
|
||||
} catch (err) {
|
||||
message.error((err as Error).message || '验证码发送失败');
|
||||
}
|
||||
},
|
||||
[message],
|
||||
);
|
||||
@@ -87,7 +111,7 @@ export function LoginPage({ open, onClose }: LoginPageProps) {
|
||||
const loginTab = (
|
||||
<LoginForm
|
||||
initialUsername={authState.username}
|
||||
initialPassword={authState.password}
|
||||
initialPassword={getStoredPassword()}
|
||||
initialRemember={authState.remember}
|
||||
initialAutoLogin={authState.autoLogin}
|
||||
submitting={submitting}
|
||||
|
||||
55
src/pages/settings/SettingsPage.tsx
Normal file
55
src/pages/settings/SettingsPage.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
// ============================================================
|
||||
// SettingsPage — 设置页面（路由命中 /settings 时以居中 Modal 叠加展示）
|
||||
//
|
||||
// 核心设计：
|
||||
// - 独立于 <Routes> 之外，通过 useLocation 判断是否渲染
|
||||
// - 命中 /settings → Modal 居中弹出，首页内容保持在背景不动
|
||||
// - 关闭 Modal → navigate(-1)，仅可通过 X 按钮关闭
|
||||
// - destroyOnClose → 关闭即销毁 DOM，不堆内存
|
||||
// ============================================================
|
||||
|
||||
import {Modal} from 'antd';
|
||||
import {SettingOutlined} from '@ant-design/icons';
|
||||
import {useLocation, useNavigate} from 'react-router-dom';
|
||||
import {useAppContext} from '@/contexts/app-context';
|
||||
import {ThemeSetting} from './ThemeSetting';
|
||||
import {StoragePathSetting} from './StoragePathSetting';
|
||||
import {SystemInfoSetting} from './SystemInfoSetting';
|
||||
import {UpdateSetting} from './UpdateSetting';
|
||||
|
||||
export function SettingsPage() {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const {edition} = useAppContext();
|
||||
const open = location.pathname === '/settings';
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
width={480}
|
||||
onCancel={() => navigate(-1)}
|
||||
destroyOnHidden={true}
|
||||
mask={
|
||||
{
|
||||
closable: false
|
||||
}
|
||||
}
|
||||
keyboard={false}
|
||||
footer={null}
|
||||
title={
|
||||
<span className="flex items-center gap-2">
|
||||
<SettingOutlined />
|
||||
设置
|
||||
</span>
|
||||
}
|
||||
styles={{body: {padding: 0, maxHeight: '70vh', overflow: 'auto'}}}
|
||||
>
|
||||
<div className="flex flex-col gap-4 p-4">
|
||||
<ThemeSetting />
|
||||
<StoragePathSetting edition={edition} />
|
||||
<SystemInfoSetting />
|
||||
<UpdateSetting />
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
188
src/pages/settings/StoragePathSetting.tsx
Normal file
188
src/pages/settings/StoragePathSetting.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
// ============================================================
|
||||
// StoragePathSetting — 存储路径设置区块
|
||||
//
|
||||
// 个人版：仅"大模型产物存储仓库路径"
|
||||
// 企业版：额外"团队创作存储仓库路径"
|
||||
// ============================================================
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
import { Card, Button, Input, Typography, Space, App } from 'antd';
|
||||
import { FolderOpenOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
|
||||
import type { Edition } from '@shared/types';
|
||||
import { useSettings } from '@/contexts/settings-context';
|
||||
import { hasIpc, safeIpcInvoke } from '@/utils/ipc';
|
||||
import { BIDIRECTIONAL } from '@shared/constants/ipc-channels';
|
||||
|
||||
const { Text, Paragraph } = Typography;
|
||||
|
||||
interface StoragePathSettingProps {
|
||||
edition: Edition;
|
||||
}
|
||||
|
||||
/** 单行路径选择器 */
|
||||
function PathRow({
|
||||
label,
|
||||
path,
|
||||
onChange,
|
||||
onClear,
|
||||
}: {
|
||||
label: string;
|
||||
path: string;
|
||||
onChange: (path: string) => void;
|
||||
onClear: () => void;
|
||||
}) {
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [inputValue, setInputValue] = useState(path);
|
||||
const { message } = App.useApp();
|
||||
|
||||
const handleSelectFolder = useCallback(async () => {
|
||||
if (!hasIpc()) {
|
||||
// 非 Electron 环境 → 切换为手动输入模式
|
||||
setInputValue(path);
|
||||
setEditing(true);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = (await safeIpcInvoke(BIDIRECTIONAL.FILE_DIALOG, {
|
||||
title: label,
|
||||
defaultPath: path || undefined,
|
||||
properties: ['openDirectory'],
|
||||
})) as { canceled: boolean; filePaths: string[] } | undefined;
|
||||
|
||||
if (!result || result.canceled || result.filePaths.length === 0) return;
|
||||
|
||||
const selectedPath = result.filePaths[0];
|
||||
onChange(selectedPath);
|
||||
message.success('路径已更新');
|
||||
} catch {
|
||||
message.error('选择文件夹失败');
|
||||
}
|
||||
}, [label, path, onChange, message]);
|
||||
|
||||
const handleSaveInput = useCallback(() => {
|
||||
onChange(inputValue.trim());
|
||||
setEditing(false);
|
||||
if (inputValue.trim()) {
|
||||
message.success('路径已更新');
|
||||
}
|
||||
}, [inputValue, onChange, message]);
|
||||
|
||||
const handleCancelEdit = useCallback(() => {
|
||||
setInputValue(path);
|
||||
setEditing(false);
|
||||
}, [path]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Text type="secondary" className="text-xs">
|
||||
{label}
|
||||
</Text>
|
||||
|
||||
{editing ? (
|
||||
<Space.Compact className="w-full">
|
||||
<Input
|
||||
size="small"
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
onPressEnter={handleSaveInput}
|
||||
placeholder="请输入或粘贴路径"
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button size="small" type="primary" onClick={handleSaveInput}>
|
||||
确定
|
||||
</Button>
|
||||
<Button size="small" onClick={handleCancelEdit}>
|
||||
取消
|
||||
</Button>
|
||||
</Space.Compact>
|
||||
) : path ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Paragraph
|
||||
className="mb-0! flex-1 min-w-0"
|
||||
style={{ maxWidth: 240 }}
|
||||
ellipsis={{ rows: 1, tooltip: path }}
|
||||
>
|
||||
<Text className="text-xs" style={{ fontFamily: 'monospace' }}>
|
||||
{path}
|
||||
</Text>
|
||||
</Paragraph>
|
||||
<Button
|
||||
size="small"
|
||||
type="text"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => {
|
||||
setInputValue(path);
|
||||
setEditing(true);
|
||||
}}
|
||||
title="手动编辑"
|
||||
/>
|
||||
<Button
|
||||
size="small"
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={onClear}
|
||||
title="清除路径"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<Text type="secondary" className="text-xs italic flex-1">
|
||||
未设置
|
||||
</Text>
|
||||
<Button
|
||||
size="small"
|
||||
type="text"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => {
|
||||
setInputValue('');
|
||||
setEditing(true);
|
||||
}}
|
||||
title="手动输入"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!editing && (
|
||||
<Button
|
||||
size="small"
|
||||
icon={<FolderOpenOutlined />}
|
||||
onClick={handleSelectFolder}
|
||||
className="self-start mt-1"
|
||||
>
|
||||
{hasIpc() ? '选择文件夹' : '手动输入路径'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function StoragePathSetting({ edition }: StoragePathSettingProps) {
|
||||
const { outputPath, teamRepoPath, setOutputPath, setTeamRepoPath, clearOutputPath, clearTeamRepoPath } =
|
||||
useSettings();
|
||||
|
||||
const isEnterprise = edition === 'enterprise';
|
||||
|
||||
return (
|
||||
<Card size="small" title="存储路径设置" className="rounded-md!">
|
||||
<div className="flex flex-col gap-4">
|
||||
<PathRow
|
||||
label="大模型产物存储仓库路径"
|
||||
path={outputPath}
|
||||
onChange={setOutputPath}
|
||||
onClear={clearOutputPath}
|
||||
/>
|
||||
|
||||
{isEnterprise && (
|
||||
<PathRow
|
||||
label="团队创作存储仓库路径"
|
||||
path={teamRepoPath}
|
||||
onChange={setTeamRepoPath}
|
||||
onClear={clearTeamRepoPath}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
65
src/pages/settings/SystemInfoSetting.tsx
Normal file
65
src/pages/settings/SystemInfoSetting.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
// ============================================================
|
||||
// SystemInfoSetting — 系统信息区块（只读展示）
|
||||
// ============================================================
|
||||
|
||||
import { Card, Tag, Typography } from 'antd';
|
||||
import {
|
||||
WindowsOutlined,
|
||||
AppleOutlined,
|
||||
InfoCircleOutlined,
|
||||
EnvironmentOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { useAppContext } from '@/contexts/app-context';
|
||||
import { getPlatformName } from '@/utils/platform';
|
||||
import { APP_VERSION } from '@shared/constants/version';
|
||||
import { getEditionName } from '@shared/constants/app';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
export function SystemInfoSetting() {
|
||||
const { platform, edition, isDevMode } = useAppContext();
|
||||
|
||||
const platformIcon =
|
||||
platform === 'darwin' ? (
|
||||
<AppleOutlined />
|
||||
) : platform === 'win32' ? (
|
||||
<WindowsOutlined />
|
||||
) : (
|
||||
<InfoCircleOutlined />
|
||||
);
|
||||
|
||||
const infoItems = [
|
||||
{ label: '运行平台', value: getPlatformName(), icon: platformIcon, color: 'purple' },
|
||||
{ label: '应用版本', value: `V${APP_VERSION}`, icon: <InfoCircleOutlined />, color: 'blue' },
|
||||
{
|
||||
label: '版本类型',
|
||||
value: getEditionName(edition),
|
||||
icon: <InfoCircleOutlined />,
|
||||
color: edition === 'enterprise' ? 'gold' : 'green',
|
||||
},
|
||||
{
|
||||
label: '运行环境',
|
||||
value: isDevMode ? '开发模式' : '生产模式',
|
||||
icon: <EnvironmentOutlined />,
|
||||
color: isDevMode ? 'orange' : 'green',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Card size="small" title="系统信息" className="rounded-md!">
|
||||
<div className="flex flex-col gap-2">
|
||||
{infoItems.map((item) => (
|
||||
<div key={item.label} className="flex items-center gap-2">
|
||||
<span style={{ color: 'var(--color-primary, #4F46E5)', fontSize: 14 }}>
|
||||
{item.icon}
|
||||
</span>
|
||||
<Text type="secondary" className="text-sm min-w-[64px]">
|
||||
{item.label}：
|
||||
</Text>
|
||||
<Tag color={item.color}>{item.value}</Tag>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
34
src/pages/settings/ThemeSetting.tsx
Normal file
34
src/pages/settings/ThemeSetting.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
// ============================================================
|
||||
// ThemeSetting — 主题切换区块
|
||||
// ============================================================
|
||||
|
||||
import { Card, Segmented, Typography } from 'antd';
|
||||
import { BulbOutlined, BulbFilled } from '@ant-design/icons';
|
||||
import { useTheme } from '@/hooks/use-theme';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
export function ThemeSetting() {
|
||||
const { isDark, setLight, setDark } = useTheme();
|
||||
|
||||
return (
|
||||
<Card size="small" title="主题设置" className="rounded-md!">
|
||||
<div className="flex items-center justify-between">
|
||||
<Text type="secondary" className="text-sm">
|
||||
{isDark ? '🌙 当前使用暗色模式' : '☀️ 当前使用亮色模式'}
|
||||
</Text>
|
||||
<Segmented
|
||||
value={isDark ? 'dark' : 'light'}
|
||||
onChange={(val) => {
|
||||
if (val === 'dark') setDark();
|
||||
else setLight();
|
||||
}}
|
||||
options={[
|
||||
{ label: '亮色', value: 'light', icon: <BulbOutlined /> },
|
||||
{ label: '暗色', value: 'dark', icon: <BulbFilled /> },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
122
src/pages/settings/UpdateSetting.tsx
Normal file
122
src/pages/settings/UpdateSetting.tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
// ============================================================
|
||||
// UpdateSetting — 版本更新区块
|
||||
// ============================================================
|
||||
|
||||
import { Card, Button, Typography, Progress, Tag } from 'antd';
|
||||
import {
|
||||
SyncOutlined,
|
||||
CheckCircleOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
RocketOutlined,
|
||||
DownloadOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { useUpdater } from '@/hooks/use-updater';
|
||||
import { isDev } from '@/utils/platform';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
export function UpdateSetting() {
|
||||
const {
|
||||
status,
|
||||
info,
|
||||
progress,
|
||||
error,
|
||||
checkForUpdates,
|
||||
installUpdate,
|
||||
} = useUpdater();
|
||||
|
||||
return (
|
||||
<Card size="small" title="版本更新" className="rounded-md!">
|
||||
<div className="flex flex-col gap-3">
|
||||
{/* ---- 状态展示 ---- */}
|
||||
{status === 'idle' && (
|
||||
<Text type="secondary" className="text-sm">
|
||||
点击下方按钮检查是否有新版本
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{status === 'checking' && (
|
||||
<div className="flex items-center gap-2">
|
||||
<SyncOutlined spin style={{ color: 'var(--color-primary, #4F46E5)' }} />
|
||||
<Text type="secondary">正在检查更新...</Text>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status === 'no-update' && (
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircleOutlined style={{ color: 'var(--color-success, #52c41a)' }} />
|
||||
<Text style={{ color: 'var(--color-success, #52c41a)' }}>已是最新版本</Text>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status === 'error' && (
|
||||
<div className="flex items-center gap-2">
|
||||
<ExclamationCircleOutlined style={{ color: 'var(--color-error, #ff4d4f)' }} />
|
||||
<Text type="danger">{error?.message || '检查更新失败'}</Text>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ---- 发现新版本 / 下载中 ---- */}
|
||||
{(status === 'available' || status === 'downloading') && (
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
<RocketOutlined style={{ color: 'var(--color-primary, #4F46E5)' }} />
|
||||
<Text strong>发现新版本：{info?.version}</Text>
|
||||
{info?.forceUpdate && <Tag color="red">强制更新</Tag>}
|
||||
</div>
|
||||
{info?.releaseNotes && (
|
||||
<Text type="secondary" className="text-xs whitespace-pre-line">
|
||||
{info.releaseNotes}
|
||||
</Text>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* ---- 下载进度 ---- */}
|
||||
{status === 'downloading' && (
|
||||
<Progress
|
||||
percent={progress.percent}
|
||||
strokeColor={{ '0%': '#4F46E5', '100%': '#7C3AED' }}
|
||||
size="small"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* ---- 下载完成 ---- */}
|
||||
{status === 'downloaded' && (
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircleOutlined style={{ color: 'var(--color-success, #52c41a)' }} />
|
||||
<Text>更新已下载完毕，点击安装并重启</Text>
|
||||
</div>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<DownloadOutlined />}
|
||||
onClick={installUpdate}
|
||||
size="small"
|
||||
className="self-start"
|
||||
>
|
||||
安装更新
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* ---- 操作按钮 ---- */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Button
|
||||
size="small"
|
||||
icon={<SyncOutlined spin={status === 'checking'} />}
|
||||
onClick={checkForUpdates}
|
||||
disabled={status === 'checking'}
|
||||
>
|
||||
检查更新
|
||||
</Button>
|
||||
{isDev() && (
|
||||
<Text type="secondary" className="text-xs">
|
||||
生产环境启动 5 秒后自动检查
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
9
src/pages/settings/index.ts
Normal file
9
src/pages/settings/index.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
// ============================================================
|
||||
// Settings barrel export
|
||||
// ============================================================
|
||||
|
||||
export { SettingsPage } from './SettingsPage';
|
||||
export { ThemeSetting } from './ThemeSetting';
|
||||
export { StoragePathSetting } from './StoragePathSetting';
|
||||
export { SystemInfoSetting } from './SystemInfoSetting';
|
||||
export { UpdateSetting } from './UpdateSetting';
|
||||
Reference in New Issue
Block a user