79 |
93 |
94 |
--------------------------------------------------------------------------------
/src/css/themes/light.css:
--------------------------------------------------------------------------------
1 | /* 浅色主题 - LovelyRes */
2 | /* 清新明亮的浅色主题配色 */
3 |
4 | [data-theme="light"] {
5 | /* 主色调 */
6 | --primary-color: #4299e1;
7 | --secondary-color: #63b3ed;
8 | --accent-color: #81e6d9;
9 | --success-color: #48bb78;
10 | --warning-color: #ed8936;
11 | --error-color: #f56565;
12 | --info-color: #4299e1;
13 |
14 | /* 背景色 */
15 | --bg-primary: #fafbfc;
16 | --bg-secondary: #ffffff;
17 | --bg-tertiary: #f4f6f8;
18 | --bg-dark: #2d3748;
19 | --bg-glass: rgba(255, 255, 255, 0.15);
20 |
21 | /* 文字颜色 */
22 | --text-primary: #2d3748;
23 | --text-secondary: #718096;
24 | --text-light: #a0aec0;
25 | --text-white: #ffffff;
26 |
27 | /* 边框和阴影 */
28 | --border-color: rgba(148, 163, 184, 0.2);
29 | --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
30 | --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
31 | --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
32 | }
33 |
34 | /* 浅色主题特定样式 */
35 | [data-theme="light"] .modern-title-bar {
36 | background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
37 | border-bottom: 1px solid var(--border-color);
38 | }
39 |
40 | [data-theme="light"] .modern-sidebar {
41 | background: var(--bg-secondary);
42 | border-right: 1px solid var(--border-color);
43 | }
44 |
45 | [data-theme="light"] .main-workspace {
46 | background: var(--bg-primary);
47 | }
48 |
49 | [data-theme="light"] .workspace-header {
50 | background: var(--bg-secondary);
51 | border-bottom: 1px solid var(--border-color);
52 | }
53 |
54 | [data-theme="light"] .status-bar {
55 | background: var(--bg-secondary);
56 | border-top: 1px solid var(--border-color);
57 | }
58 |
59 | [data-theme="light"] .modern-card {
60 | background: var(--bg-secondary);
61 | border: 1px solid var(--border-color);
62 | box-shadow: var(--shadow-sm);
63 | }
64 |
65 | [data-theme="light"] .modern-card:hover {
66 | box-shadow: var(--shadow-md);
67 | border-color: var(--primary-color);
68 | }
69 |
70 | [data-theme="light"] .modern-input {
71 | background: var(--bg-secondary);
72 | border: 1px solid var(--border-color);
73 | color: var(--text-primary);
74 | }
75 |
76 | [data-theme="light"] .modern-input:focus {
77 | border-color: var(--primary-color);
78 | box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
79 | }
80 |
81 | [data-theme="light"] .control-button:hover {
82 | background: var(--bg-tertiary);
83 | color: var(--text-primary);
84 | }
85 |
86 | /* 浅色主题特有的装饰效果 */
87 | [data-theme="light"] .luxe-text {
88 | background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
89 | -webkit-background-clip: text;
90 | -webkit-text-fill-color: transparent;
91 | background-clip: text;
92 | }
93 |
94 | /* 浅色主题的连接状态指示器 */
95 | [data-theme="light"] .connection-status {
96 | background: var(--success-color);
97 | color: white;
98 | }
99 |
100 | /* 浅色主题的模态框样式 */
101 | [data-theme="light"] .modal-overlay {
102 | background: rgba(0, 0, 0, 0.5);
103 | }
104 |
105 | [data-theme="light"] .modal-content {
106 | background: var(--bg-secondary);
107 | border: 1px solid var(--border-color);
108 | box-shadow: var(--shadow-lg);
109 | }
110 |
--------------------------------------------------------------------------------
/src/components/IconParkIcon.vue:
--------------------------------------------------------------------------------
1 |
2 |
80 |
89 |
81 | 01.
82 |
84 | Lightning.
83 |
85 |
88 | Hover Me?
86 | 87 |
90 |
91 |
92 |
2 | 
3 |
4 | # LovelyERes
5 |
6 | **Linux 应急响应工具**
7 |
8 | 一款专为快速服务器管理和应急响应设计的现代化、高性能 SSH 终端及诊断工具箱。
9 |
10 | [](https://tauri.app)
11 | [](https://vuejs.org)
12 | [](https://www.rust-lang.org)
13 | [](https://www.typescriptlang.org)
14 | [](LICENSE)
15 |
16 | [功能特性](#-功能特性) • [技术栈](#-技术栈) • [快速开始](#-快速开始) • [开发计划](#-开发计划)
17 |
18 |
19 | ---
20 |
21 | ## 📖 简介
22 |
23 | **LovelyERes** (Lovely Emergency Response) 是一款专为应急响应、CTF 比赛和日常运维设计的多功能桌面应用。与标准的 SSH 客户端不同，LovelyERes 专为 **应急响应场景和攻防演练** 优化，提供了一个稳健、安全且高效的环境，用于快速诊断、修复 Linux 服务器问题，同时也能胜任日常运维管理工作。
24 |
25 | 基于 **Tauri v2** 框架构建，它结合了轻量级的原生占用和 **Vue 3** 带来的现代化 UI 体验。
26 |
27 | ## 支持
28 |
29 | **如果觉得好用请支持我一下**
30 |
31 |
3 |
4 | # LovelyERes
5 |
6 | **Linux 应急响应工具**
7 |
8 | 一款专为快速服务器管理和应急响应设计的现代化、高性能 SSH 终端及诊断工具箱。
9 |
10 | [](https://tauri.app)
11 | [](https://vuejs.org)
12 | [](https://www.rust-lang.org)
13 | [](https://www.typescriptlang.org)
14 | [](LICENSE)
15 |
16 | [功能特性](#-功能特性) • [技术栈](#-技术栈) • [快速开始](#-快速开始) • [开发计划](#-开发计划)
17 |
151 | Built with ❤️ by the Tokeii
152 |
153 |
--------------------------------------------------------------------------------
/src-tauri/src/device_info.rs:
--------------------------------------------------------------------------------
1 | // 设备信息模块
2 | // 用于获取设备的唯一标识符（UUID）
3 |
4 | use serde::{Deserialize, Serialize};
5 | use std::process::Command;
6 |
7 | // Windows 平台需要导入 CommandExt 来隐藏控制台窗口
8 | #[cfg(target_os = "windows")]
9 | use std::os::windows::process::CommandExt;
10 |
11 | #[derive(Debug, Clone, Serialize, Deserialize)]
12 | pub struct DeviceInfo {
13 | pub device_uuid: String,
14 | pub device_type: String,
15 | pub device_name: String,
16 | }
17 |
18 | /// 获取 Windows 设备 UUID
19 | #[cfg(target_os = "windows")]
20 | fn get_windows_uuid() -> Result
79 |
82 |
83 |
84 |
91 |
107 | `;
108 |
109 | // 添加动画样式
110 | if (!document.getElementById('auth-guard-styles')) {
111 | const style = document.createElement('style');
112 | style.id = 'auth-guard-styles';
113 | style.textContent = `
114 | @keyframes slideInRight {
115 | from {
116 | transform: translateX(100%);
117 | opacity: 0;
118 | }
119 | to {
120 | transform: translateX(0);
121 | opacity: 1;
122 | }
123 | }
124 |
125 | @keyframes slideOutRight {
126 | from {
127 | transform: translateX(0);
128 | opacity: 1;
129 | }
130 | to {
131 | transform: translateX(100%);
132 | opacity: 0;
133 | }
134 | }
135 | `;
136 | document.head.appendChild(style);
137 | }
138 |
139 | // 添加到页面
140 | document.body.appendChild(toast);
141 |
142 | // 3秒后自动移除
143 | setTimeout(() => {
144 | toast.style.animation = 'slideOutRight 0.3s ease-out';
145 | setTimeout(() => {
146 | toast.remove();
147 | }, 300);
148 | }, 3000);
149 | }
150 | */
151 |
152 | /**
153 | * 包装需要认证的函数
154 | * @param fn 需要认证的函数
155 | * @param message 提示消息
156 | * @returns 包装后的函数
157 | */
158 | public withAuth
85 | 需要登录
86 |
87 |
88 | ${message}
89 |
90 |
223 |
235 |
236 |
237 |
238 |
--------------------------------------------------------------------------------
/src/modules/remote/sshConnectionManager.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * SSH连接管理器
3 | * 处理实际的SSH连接操作和状态管理
4 | * 与ssh/connectionManager.ts协同工作
5 | */
6 |
7 | import { SSHConnectionManager as ConfigManager } from '../ssh/connectionManager';
8 |
9 | export interface SSHConnectionInfo {
10 | id?: string; // 连接配置ID
11 | host: string;
12 | port: number;
13 | username: string;
14 | connected: boolean;
15 | lastActivity?: Date;
16 | }
17 |
18 | export class SSHConnectionManager {
19 | private connectionStatus: SSHConnectionInfo | null = null;
20 | private listeners: Array<(status: SSHConnectionInfo | null) => void> = [];
21 | private configManager: ConfigManager;
22 |
23 | constructor() {
24 | this.configManager = new ConfigManager();
25 | }
26 |
27 | /**
28 | * 获取当前连接状态
29 | */
30 | getConnectionStatus(): SSHConnectionInfo | null {
31 | return this.connectionStatus;
32 | }
33 |
34 | /**
35 | * 检查是否已连接
36 | */
37 | isConnected(): boolean {
38 | return this.connectionStatus?.connected || false;
39 | }
40 |
41 | /**
42 | * 获取当前连接的ID
43 | */
44 | getCurrentConnectionId(): string | undefined {
45 | return this.connectionStatus?.id;
46 | }
47 |
48 | /**
49 | * 手动设置连接状态（用于同步主界面连接状态）
50 | */
51 | setConnectionStatus(status: SSHConnectionInfo | null): void {
52 | this.connectionStatus = status;
53 | this.notifyListeners();
54 | }
55 |
56 | /**
57 | * 建立SSH连接
58 | */
59 | async connect(host: string, port: number, username: string, password: string): Promise
224 |
234 |
225 |
226 |
227 |
228 | LovelyRes
229 |
232 | 正在初始化系统...
233 |
42 |
143 | `;
144 |
145 | // 添加键盘事件监听
146 | this.dialog.addEventListener('keydown', (e) => {
147 | if (e.key === 'Escape') {
148 | this.hide();
149 | } else if (e.key === 'Enter') {
150 | this.connect();
151 | }
152 | });
153 |
154 | // 点击背景关闭对话框
155 | this.dialog.addEventListener('click', (e) => {
156 | if (e.target === this.dialog) {
157 | this.hide();
158 | }
159 | });
160 |
161 | document.body.appendChild(this.dialog);
162 |
163 | // 聚焦到第一个输入框
164 | setTimeout(() => {
165 | const hostInput = document.getElementById('ssh-host') as HTMLInputElement;
166 | if (hostInput) {
167 | hostInput.focus();
168 | }
169 | }, 100);
170 | }
171 |
172 | /**
173 | * 隐藏对话框
174 | */
175 | hide(): void {
176 | if (this.dialog) {
177 | this.dialog.remove();
178 | this.dialog = null;
179 | }
180 | }
181 |
182 | /**
183 | * 执行连接
184 | */
185 | async connect(): Promise43 | 🔗 SSH连接设置 44 |
45 | 46 |
47 |
50 |
64 |
65 |
66 |
67 |
70 |
86 |
87 |
88 |
89 |
92 |
106 |
107 |
108 |
109 |
112 |
126 |
127 |
128 |
129 |
135 |
141 |
142 |
212 |
213 |
215 |
216 |
239 |
240 |
241 |
242 |
243 |
--------------------------------------------------------------------------------
/src/modules/core/stateManager.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 状态管理器
3 | * 负责应用状态的管理和同步
4 | */
5 |
6 | import type { AppState } from './app';
7 | import type { ModernUIRenderer } from '../ui/modernUIRenderer';
8 |
9 | export class StateManager {
10 | private state: AppState;
11 | private listeners: Array<(state: AppState) => void> = [];
12 | private uiRenderer?: ModernUIRenderer;
13 |
14 | constructor() {
15 | this.state = {
16 | theme: 'light',
17 | isConnected: false,
18 | currentServer: undefined,
19 | loading: false,
20 | currentPage: 'dashboard',
21 | };
22 | }
23 |
24 | /**
25 | * 初始化状态管理器
26 | */
27 | async initialize(): Promise初始化容器终端...
214 |
317 |
335 | `;
336 | }
337 | }
338 |
--------------------------------------------------------------------------------
/src/modules/user/accountSettingsModal.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 账户设置模态框
3 | */
4 |
5 | import { apiService } from '../api/apiService';
6 | import { userManager } from './userManager';
7 |
8 | export class AccountSettingsModal {
9 | private static instance: AccountSettingsModal;
10 | private modal: HTMLElement | null = null;
11 |
12 | private constructor() {}
13 |
14 | public static getInstance(): AccountSettingsModal {
15 | if (!AccountSettingsModal.instance) {
16 | AccountSettingsModal.instance = new AccountSettingsModal();
17 | }
18 | return AccountSettingsModal.instance;
19 | }
20 |
21 | /**
22 | * 显示账户设置模态框
23 | */
24 | public show(): void {
25 | if (!this.modal) {
26 | this.createModal();
27 | }
28 |
29 | const user = userManager.getCurrentUser();
30 | if (!user) {
31 | console.error('❌ 未登录，无法打开账户设置');
32 | return;
33 | }
34 |
35 | // 填充表单数据
36 | const nicknameInput = document.getElementById('account-nickname') as HTMLInputElement;
37 | const emailInput = document.getElementById('account-email') as HTMLInputElement;
38 | const qqIdInput = document.getElementById('account-qq-id') as HTMLInputElement;
39 |
40 | if (nicknameInput) nicknameInput.value = user.nickname || '';
41 | if (emailInput) emailInput.value = user.email || '';
42 | if (qqIdInput) qqIdInput.value = user.qq_id || '';
43 |
44 | this.modal!.style.display = 'flex';
45 | }
46 |
47 | /**
48 | * 隐藏账户设置模态框
49 | */
50 | public hide(): void {
51 | if (this.modal) {
52 | this.modal.style.display = 'none';
53 | }
54 | }
55 |
56 | /**
57 | * 创建模态框
58 | */
59 | private createModal(): void {
60 | const modal = document.createElement('div');
61 | modal.id = 'account-settings-modal';
62 | modal.className = 'modal-overlay';
63 | modal.style.cssText = `
64 | position: fixed;
65 | top: 0;
66 | left: 0;
67 | right: 0;
68 | bottom: 0;
69 | background: rgba(0, 0, 0, 0.5);
70 | display: none;
71 | justify-content: center;
72 | align-items: center;
73 | z-index: 10000;
74 | `;
75 |
76 | modal.innerHTML = `
77 |
214 | `;
215 |
216 | // 点击背景关闭
217 | modal.addEventListener('click', (e) => {
218 | if (e.target === modal) {
219 | this.hide();
220 | }
221 | });
222 |
223 | // 表单提交
224 | const form = modal.querySelector('#account-settings-form') as HTMLFormElement;
225 | form.addEventListener('submit', async (e) => {
226 | e.preventDefault();
227 | await this.handleSubmit();
228 | });
229 |
230 | document.body.appendChild(modal);
231 | this.modal = modal;
232 | }
233 |
234 | /**
235 | * 处理表单提交
236 | */
237 | private async handleSubmit(): Promise
318 | ${config.icon}
319 | ${config.name}
320 |
321 |
322 | ${config.description}
323 |
324 |
332 | 示例按钮
333 |
334 |