715 lines
20 KiB
Markdown
715 lines
20 KiB
Markdown
# 模块10：模式切换功能
|
||
|
||
---
|
||
|
||
## 🎨 UI设计系统概览
|
||
|
||
> **完整设计系统文档请参考：** `UI设计系统.md`
|
||
|
||
### 核心设计原则
|
||
- **现代简约**：界面清晰，层次分明
|
||
- **专业高效**：减少操作步骤，提升工作效率
|
||
- **一致性**：统一的视觉语言和交互模式
|
||
- **可访问性**：符合WCAG 2.1 AA标准
|
||
|
||
### 关键设计令牌
|
||
|
||
**颜色系统：**
|
||
- 主色：`#0d6efd`（操作按钮、选中状态）
|
||
- 成功：`#198754`（连接成功状态）
|
||
- 危险：`#dc3545`（删除操作、错误提示）
|
||
- 深灰：`#212529`（导航栏背景）
|
||
- 浅灰：`#e9ecef`（工具栏背景）
|
||
|
||
**字体系统：**
|
||
- 字体族：系统字体栈（-apple-system, Segoe UI, Roboto等）
|
||
- 正文：14px，行高1.5
|
||
- 标题：20-32px，行高1.2-1.4
|
||
- 小号文字：12px（文件大小、日期等）
|
||
|
||
**间距系统：**
|
||
- 基础单位：8px
|
||
- 标准间距：16px（1rem）
|
||
- 组件内边距：8px-16px
|
||
|
||
**组件规范：**
|
||
- 导航栏：高度48px，深色背景
|
||
- 工具栏：浅灰背景，按钮间距8px
|
||
- 文件项：最小高度44px，悬停效果150ms
|
||
- 按钮：圆角4px，过渡150ms
|
||
|
||
**交互规范：**
|
||
- 悬停效果：150ms过渡
|
||
- 触摸目标：最小44x44px
|
||
- 键盘导航：Tab、Enter、Delete、F2、F5、Esc
|
||
- 焦点状态：2px蓝色轮廓
|
||
|
||
**响应式断点：**
|
||
- 移动端：< 768px（双面板垂直排列）
|
||
- 平板：768px - 1024px
|
||
- 桌面：> 1024px（标准布局）
|
||
|
||
---
|
||
|
||
## 10.1 功能概述
|
||
实现左侧和右侧面板在"本地文件"和"SFTP服务器"模式之间切换，支持同时连接多个SFTP服务器。
|
||
|
||
## 10.2 模式状态管理
|
||
|
||
### 10.2.1 JavaScript状态管理
|
||
|
||
```javascript
|
||
// 面板状态管理
|
||
const panelState = {
|
||
left: {
|
||
mode: 'local', // 'local' 或 'sftp'
|
||
sessionId: 'local', // 'local' 或 SFTP会话ID
|
||
currentPath: '', // 当前路径
|
||
selectedFiles: [] // 选中的文件
|
||
},
|
||
right: {
|
||
mode: 'local',
|
||
sessionId: 'local',
|
||
currentPath: '',
|
||
selectedFiles: []
|
||
}
|
||
};
|
||
|
||
// 活跃连接映射
|
||
const activeConnections = {};
|
||
|
||
// 已保存的连接列表
|
||
let savedConnections = [];
|
||
```
|
||
|
||
### 10.2.2 模式切换逻辑
|
||
|
||
```javascript
|
||
// 模式切换
|
||
function onModeChange(panelId) {
|
||
const mode = $(`#${panelId}-mode`).val();
|
||
panelState[panelId].mode = mode;
|
||
|
||
if (mode === 'local') {
|
||
switchToLocalMode(panelId);
|
||
} else {
|
||
switchToSftpMode(panelId);
|
||
}
|
||
}
|
||
|
||
// 切换到本地模式
|
||
function switchToLocalMode(panelId) {
|
||
updateStatus(`正在切换到本地模式...`);
|
||
|
||
// 隐藏SFTP连接选择器
|
||
$(`#${panelId}-connection`).hide();
|
||
|
||
// 更新会话ID
|
||
panelState[panelId].sessionId = 'local';
|
||
|
||
// 设置默认路径
|
||
panelState[panelId].currentPath = getDefaultLocalPath();
|
||
|
||
// 加载本地文件列表
|
||
loadFiles(panelId);
|
||
|
||
updateStatus('已切换到本地模式');
|
||
}
|
||
|
||
// 切换到SFTP模式
|
||
function switchToSftpMode(panelId) {
|
||
updateStatus(`正在切换到SFTP模式...`);
|
||
|
||
// 显示SFTP连接选择器
|
||
$(`#${panelId}-connection`).show();
|
||
|
||
// 加载已保存的连接列表
|
||
loadSavedConnections(panelId);
|
||
|
||
// 检查是否有活跃的SFTP连接
|
||
const activeSessionId = findActiveSftpSession(panelId);
|
||
if (activeSessionId) {
|
||
// 使用已有连接
|
||
panelState[panelId].sessionId = activeSessionId;
|
||
$(`#${panelId}-connection`).val(activeSessionId);
|
||
loadSftpCurrentPath(panelId, activeSessionId);
|
||
} else {
|
||
// 提示用户选择或创建连接
|
||
alert('请选择一个SFTP连接或创建新连接');
|
||
}
|
||
|
||
updateStatus('已切换到SFTP模式');
|
||
}
|
||
|
||
// 获取默认本地路径
|
||
function getDefaultLocalPath() {
|
||
return System.getProperty('user.home');
|
||
}
|
||
|
||
// 查找活跃的SFTP会话
|
||
function findActiveSftpSession(panelId) {
|
||
const connectionSelect = $(`#${panelId}-connection`);
|
||
const sessionId = connectionSelect.val();
|
||
if (sessionId && sessionId !== 'local') {
|
||
return sessionId;
|
||
}
|
||
return null;
|
||
}
|
||
|
||
// 加载SFTP当前路径
|
||
function loadSftpCurrentPath(panelId, sessionId) {
|
||
$.ajax({
|
||
url: '/api/files/path',
|
||
method: 'GET',
|
||
data: {sessionId: sessionId},
|
||
success: function(response) {
|
||
if (response.success) {
|
||
panelState[panelId].currentPath = response.data.path;
|
||
loadFiles(panelId);
|
||
} else {
|
||
alert('获取路径失败: ' + response.message);
|
||
}
|
||
},
|
||
error: handleError
|
||
});
|
||
}
|
||
```
|
||
|
||
## 10.3 连接管理UI
|
||
|
||
### 10.3.1 连接列表加载
|
||
|
||
```javascript
|
||
// 加载已保存的连接列表
|
||
function loadSavedConnections(panelId) {
|
||
$.ajax({
|
||
url: '/api/connection/list',
|
||
method: 'GET',
|
||
success: function(response) {
|
||
if (response.success) {
|
||
savedConnections = response.data;
|
||
updateConnectionSelect(panelId, savedConnections);
|
||
} else {
|
||
alert('加载连接列表失败: ' + response.message);
|
||
}
|
||
},
|
||
error: handleError
|
||
});
|
||
}
|
||
|
||
// 更新连接选择器
|
||
function updateConnectionSelect(panelId, connections) {
|
||
const select = $(`#${panelId}-connection`);
|
||
select.empty();
|
||
|
||
// 添加选项
|
||
if (connections.length === 0) {
|
||
select.append('<option value="">请选择连接</option>');
|
||
} else {
|
||
connections.forEach(conn => {
|
||
const option = $('<option>');
|
||
option.val(conn.id);
|
||
option.text(`${conn.name} (${conn.username}@${conn.host})`);
|
||
select.append(option);
|
||
});
|
||
}
|
||
}
|
||
|
||
// 加载活跃连接列表
|
||
function loadActiveConnections() {
|
||
$.ajax({
|
||
url: '/api/connection/active',
|
||
method: 'GET',
|
||
success: function(response) {
|
||
if (response.success) {
|
||
activeConnections = response.data;
|
||
updateConnectionPanels();
|
||
} else {
|
||
console.error('加载活跃连接失败:', response.message);
|
||
}
|
||
},
|
||
error: handleError
|
||
});
|
||
}
|
||
|
||
// 更新连接面板
|
||
function updateConnectionPanels() {
|
||
Object.keys(panelState).forEach(panelId => {
|
||
if (panelState[panelId].mode === 'sftp') {
|
||
updateConnectionSelect(panelId, savedConnections);
|
||
// 选中当前活跃的连接
|
||
const currentSessionId = panelState[panelId].sessionId;
|
||
if (currentSessionId !== 'local') {
|
||
// 找到对应的连接ID并选中
|
||
Object.entries(activeConnections).forEach(([sessionId, conn]) => {
|
||
if (sessionId === currentSessionId) {
|
||
$(`#${panelId}-connection`).val(conn.id);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
```
|
||
|
||
### 10.3.2 连接管理对话框
|
||
|
||
```javascript
|
||
// 显示连接管理对话框
|
||
function showConnectionDialog() {
|
||
$('#connectionModal').modal('show');
|
||
loadConnectionList();
|
||
}
|
||
|
||
// 加载连接列表
|
||
function loadConnectionList() {
|
||
const connectionList = $('#connection-list');
|
||
connectionList.empty();
|
||
|
||
if (savedConnections.length === 0) {
|
||
connectionList.html('<p class="text-muted text-center">暂无保存的连接</p>');
|
||
return;
|
||
}
|
||
|
||
savedConnections.forEach(conn => {
|
||
const item = $(`
|
||
<div class="connection-item" data-id="${conn.id}">
|
||
<div>
|
||
<div class="connection-name">${conn.name}</div>
|
||
<div class="connection-info">${conn.username}@${conn.host}:${conn.port}</div>
|
||
</div>
|
||
<div class="connection-actions">
|
||
<button class="btn btn-sm btn-primary" onclick="connectToSftp(${conn.id})">连接</button>
|
||
<button class="btn btn-sm btn-danger" onclick="deleteConnection(${conn.id})">删除</button>
|
||
</div>
|
||
</div>
|
||
`);
|
||
connectionList.append(item);
|
||
});
|
||
}
|
||
|
||
// 显示添加连接对话框
|
||
function showAddConnectionDialog() {
|
||
$('#connectionModal').modal('hide');
|
||
$('#addConnectionModal').modal('show');
|
||
$('#connection-form')[0].reset();
|
||
}
|
||
|
||
// 保存连接
|
||
function saveConnection() {
|
||
const formData = $('#connection-form').serializeObject();
|
||
|
||
$.ajax({
|
||
url: '/api/connection/save',
|
||
method: 'POST',
|
||
contentType: 'application/json',
|
||
data: JSON.stringify(formData),
|
||
success: function(response) {
|
||
if (response.success) {
|
||
alert('连接保存成功');
|
||
$('#addConnectionModal').modal('hide');
|
||
$('#connectionModal').modal('show');
|
||
loadSavedConnections('left');
|
||
loadSavedConnections('right');
|
||
} else {
|
||
alert('保存失败: ' + response.message);
|
||
}
|
||
},
|
||
error: handleError
|
||
});
|
||
}
|
||
|
||
// 删除连接
|
||
function deleteConnection(id) {
|
||
if (confirm('确定要删除此连接吗？')) {
|
||
$.ajax({
|
||
url: '/api/connection/' + id,
|
||
method: 'DELETE',
|
||
success: function(response) {
|
||
if (response.success) {
|
||
alert('删除成功');
|
||
loadConnectionList();
|
||
loadSavedConnections('left');
|
||
loadSavedConnections('right');
|
||
} else {
|
||
alert('删除失败: ' + response.message);
|
||
}
|
||
},
|
||
error: handleError
|
||
});
|
||
}
|
||
}
|
||
|
||
// 序列化表单为对象
|
||
$.fn.serializeObject = function() {
|
||
const o = {};
|
||
const a = this.serializeArray();
|
||
$.each(a, function() {
|
||
if (o[this.name] !== undefined) {
|
||
if (!o[this.name].push) {
|
||
o[this.name] = [o[this.name]];
|
||
}
|
||
o[this.name].push(this.value || '');
|
||
} else {
|
||
o[this.name] = this.value || '';
|
||
}
|
||
});
|
||
return o;
|
||
};
|
||
```
|
||
|
||
### 10.3.3 SFTP连接
|
||
|
||
```javascript
|
||
// 连接到SFTP服务器
|
||
function connectToSftp(connectionId) {
|
||
// 查找连接配置
|
||
const connection = savedConnections.find(c => c.id === connectionId);
|
||
if (!connection) {
|
||
alert('连接不存在');
|
||
return;
|
||
}
|
||
|
||
// 检查是否已连接
|
||
const existingSession = findSessionByConnectionId(connectionId);
|
||
if (existingSession) {
|
||
alert('该连接已在使用中');
|
||
return;
|
||
}
|
||
|
||
updateStatus(`正在连接到 ${connection.name}...`);
|
||
|
||
$.ajax({
|
||
url: '/api/connection/connect',
|
||
method: 'POST',
|
||
contentType: 'application/json',
|
||
data: JSON.stringify(connection),
|
||
success: function(response) {
|
||
if (response.success) {
|
||
const sessionId = response.data;
|
||
|
||
// 更新活跃连接列表
|
||
activeConnections[sessionId] = connection;
|
||
|
||
// 更新选择器
|
||
$(`#left-connection`).val(connectionId);
|
||
$(`#right-connection`).val(connectionId);
|
||
|
||
// 更新面板状态
|
||
updatePanelStateWithConnection(sessionId, connection);
|
||
|
||
// 加载活跃连接到选择器
|
||
updateActiveConnectionOptions();
|
||
|
||
alert('连接成功');
|
||
updateStatus('已连接到 ' + connection.name);
|
||
} else {
|
||
alert('连接失败: ' + response.message);
|
||
updateStatus('连接失败: ' + response.message);
|
||
}
|
||
},
|
||
error: function(xhr, status, error) {
|
||
alert('连接失败: ' + error);
|
||
updateStatus('连接失败: ' + error);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 查找会话
|
||
function findSessionByConnectionId(connectionId) {
|
||
return Object.entries(activeConnections).find(([sessionId, conn]) => conn.id === connectionId);
|
||
}
|
||
|
||
// 更新面板状态
|
||
function updatePanelStateWithConnection(sessionId, connection) {
|
||
// 更新左侧面板（如果是SFTP模式）
|
||
if (panelState.left.mode === 'sftp') {
|
||
panelState.left.sessionId = sessionId;
|
||
$(`#left-connection`).val(connection.id);
|
||
loadSftpCurrentPath('left', sessionId);
|
||
}
|
||
|
||
// 更新右侧面板（如果是SFTP模式）
|
||
if (panelState.right.mode === 'sftp') {
|
||
panelState.right.sessionId = sessionId;
|
||
$(`#right-connection`).val(connection.id);
|
||
loadSftpCurrentPath('right', sessionId);
|
||
}
|
||
}
|
||
|
||
// 更新活跃连接选项
|
||
function updateActiveConnectionOptions() {
|
||
Object.keys(panelState).forEach(panelId => {
|
||
if (panelState[panelId].mode === 'sftp') {
|
||
const select = $(`#${panelId}-connection`);
|
||
select.empty();
|
||
|
||
// 添加选项
|
||
if (Object.keys(activeConnections).length === 0) {
|
||
select.append('<option value="">请先连接</option>');
|
||
} else {
|
||
Object.entries(activeConnections).forEach(([sessionId, conn]) => {
|
||
const option = $('<option>');
|
||
option.val(sessionId);
|
||
option.text(`${conn.name} (${conn.username}@${conn.host})`);
|
||
select.append(option);
|
||
});
|
||
}
|
||
|
||
// 选中的是当前会话
|
||
if (panelState[panelId].sessionId !== 'local') {
|
||
select.val(panelState[panelId].sessionId);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 连接切换
|
||
function onConnectionChange(panelId) {
|
||
const sessionId = $(`#${panelId}-connection`).val();
|
||
if (!sessionId) {
|
||
return;
|
||
}
|
||
|
||
panelState[panelId].sessionId = sessionId;
|
||
loadSftpCurrentPath(panelId, sessionId);
|
||
}
|
||
```
|
||
|
||
## 10.4 连接状态显示
|
||
|
||
### 10.4.1 连接状态指示器
|
||
|
||
```html
|
||
<!-- 在面板头部添加状态指示器 -->
|
||
<div class="panel-header">
|
||
<select class="form-select form-select-sm panel-mode" id="left-mode" onchange="onModeChange('left')">
|
||
<option value="local">本地文件</option>
|
||
<option value="sftp">SFTP服务器</option>
|
||
</select>
|
||
<div class="connection-status" id="left-status" style="display:none;">
|
||
<span class="status-dot" data-status="connected"></span>
|
||
<span class="status-text">已连接</span>
|
||
</div>
|
||
<select class="form-select form-select-sm connection-select" id="left-connection" style="display:none;" onchange="onConnectionChange('left')">
|
||
</select>
|
||
</div>
|
||
```
|
||
|
||
### 10.4.2 状态样式
|
||
|
||
```css
|
||
/* 连接状态 */
|
||
.connection-status {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 8px;
|
||
}
|
||
|
||
.status-dot {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
display: inline-block;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.status-dot[data-status="connected"] {
|
||
background-color: #28a745;
|
||
}
|
||
|
||
.status-dot[data-status="disconnected"] {
|
||
background-color: #dc3545;
|
||
}
|
||
|
||
.status-dot[data-status="connecting"] {
|
||
background-color: #ffc107;
|
||
animation: pulse 1s infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
|
||
.status-text {
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
|
||
.connection-status.connected .status-text {
|
||
color: #28a745;
|
||
}
|
||
|
||
.connection-status.disconnected .status-text {
|
||
color: #dc3545;
|
||
}
|
||
|
||
.connection-status.connecting .status-text {
|
||
color: #ffc107;
|
||
}
|
||
```
|
||
|
||
### 10.4.3 状态更新逻辑
|
||
|
||
```javascript
|
||
// 更新连接状态显示
|
||
function updateConnectionStatus(panelId, status, text) {
|
||
const statusDiv = $(`#${panelId}-status`);
|
||
if (statusDiv.length === 0) {
|
||
return;
|
||
}
|
||
|
||
const statusDot = statusDiv.find('.status-dot');
|
||
const statusText = statusDiv.find('.status-text');
|
||
|
||
statusDiv.removeClass('connected disconnected connecting');
|
||
statusDiv.addClass(status);
|
||
|
||
statusDot.attr('data-status', status);
|
||
statusText.text(text);
|
||
}
|
||
|
||
// 显示连接状态
|
||
function showConnectionStatus(panelId, sessionId) {
|
||
const statusDiv = $(`#${panelId}-status`);
|
||
if (statusDiv.length === 0) {
|
||
return;
|
||
}
|
||
|
||
if (sessionId === 'local') {
|
||
statusDiv.hide();
|
||
} else {
|
||
statusDiv.show();
|
||
const connection = activeConnections[sessionId];
|
||
if (connection) {
|
||
updateConnectionStatus(panelId, 'connected', `已连接: ${connection.name}`);
|
||
} else {
|
||
updateConnectionStatus(panelId, 'disconnected', '未连接');
|
||
}
|
||
}
|
||
}
|
||
|
||
// 更新模式切换时的状态
|
||
function onModeChange(panelId) {
|
||
const mode = $(`#${panelId}-mode`).val();
|
||
panelState[panelId].mode = mode;
|
||
|
||
if (mode === 'local') {
|
||
switchToLocalMode(panelId);
|
||
showConnectionStatus(panelId, 'local');
|
||
} else {
|
||
switchToSftpMode(panelId);
|
||
}
|
||
}
|
||
```
|
||
|
||
## 10.5 断开连接
|
||
|
||
```javascript
|
||
// 断开SFTP连接
|
||
function disconnectFromSftp(sessionId) {
|
||
updateStatus('正在断开连接...');
|
||
|
||
$.ajax({
|
||
url: '/api/connection/disconnect',
|
||
method: 'POST',
|
||
contentType: 'application/json',
|
||
data: JSON.stringify({sessionId: sessionId}),
|
||
success: function(response) {
|
||
if (response.success) {
|
||
// 从活跃连接中移除
|
||
delete activeConnections[sessionId];
|
||
|
||
// 更新面板状态
|
||
updatePanelsAfterDisconnect(sessionId);
|
||
|
||
// 更新连接选项
|
||
updateActiveConnectionOptions();
|
||
|
||
alert('已断开连接');
|
||
updateStatus('连接已断开');
|
||
} else {
|
||
alert('断开连接失败: ' + response.message);
|
||
}
|
||
},
|
||
error: handleError
|
||
});
|
||
}
|
||
|
||
// 更新断开连接后的面板
|
||
function updatePanelsAfterDisconnect(sessionId) {
|
||
Object.keys(panelState).forEach(panelId => {
|
||
if (panelState[panelId].sessionId === sessionId) {
|
||
panelState[panelId].sessionId = 'local';
|
||
panelState[panelId].mode = 'local';
|
||
$(`#${panelId}-mode`).val('local');
|
||
onModeChange(panelId);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 在连接项中添加断开按钮
|
||
function loadConnectionList() {
|
||
const connectionList = $('#connection-list');
|
||
connectionList.empty();
|
||
|
||
if (savedConnections.length === 0) {
|
||
connectionList.html('<p class="text-muted text-center">暂无保存的连接</p>');
|
||
return;
|
||
}
|
||
|
||
savedConnections.forEach(conn => {
|
||
// 查找是否有活跃会话
|
||
const activeSession = findSessionByConnectionId(conn.id);
|
||
|
||
const item = $(`
|
||
<div class="connection-item" data-id="${conn.id}">
|
||
<div>
|
||
<div class="connection-name">${conn.name}</div>
|
||
<div class="connection-info">${conn.username}@${conn.host}:${conn.port}</div>
|
||
</div>
|
||
<div class="connection-actions">
|
||
${activeSession ?
|
||
'<button class="btn btn-sm btn-warning" onclick="disconnectFromSftp(\'' +
|
||
activeSession[0] + '\')">断开</button>' :
|
||
'<button class="btn btn-sm btn-primary" onclick="connectToSftp(' +
|
||
conn.id + ')">连接</button>'
|
||
}
|
||
<button class="btn btn-sm btn-danger" onclick="deleteConnection(${conn.id})">删除</button>
|
||
</div>
|
||
</div>
|
||
`);
|
||
connectionList.append(item);
|
||
});
|
||
}
|
||
```
|
||
|
||
## 实施步骤
|
||
|
||
1. **更新app.js**：添加模式切换逻辑
|
||
|
||
2. **更新index.html**：添加连接管理对话框和状态指示器
|
||
|
||
3. **测试功能**：
|
||
- 测试本地/SFTP模式切换
|
||
- 测试连接管理功能
|
||
- 测试多连接管理
|
||
- 测试连接状态显示
|
||
|
||
## 注意事项
|
||
|
||
1. **状态同步**：确保前后端状态同步
|
||
2. **错误处理**：连接失败时的友好提示
|
||
3. **会话管理**：正确管理多个SFTP会话
|
||
4. **性能优化**：避免频繁刷新连接列表
|
||
5. **用户体验**：提供清晰的状态反馈
|
||
|
||
## 下一步
|
||
|
||
完成模块10后，继续模块11：API接口设计规范
|