mirror of
https://github.com/qaiu/netdisk-fast-download.git
synced 2025-12-16 20:33:03 +00:00
js演练场
This commit is contained in:
q
309
web-front/PLAYGROUND_UI_UPGRADE.md
Normal file
309
web-front/PLAYGROUND_UI_UPGRADE.md
Normal file
@@ -0,0 +1,309 @@
|
||||
# 演练场界面升级完成
|
||||
|
||||
## ✅ 已完成的功能
|
||||
|
||||
### 1. IDE风格工具栏
|
||||
|
||||
**新的工具栏布局**:
|
||||
- 运行按钮（带loading动画）+ 快捷键提示
|
||||
- 保存、格式化按钮组
|
||||
- 主题切换下拉菜单（3种主题）
|
||||
- 全屏按钮
|
||||
- 更多操作下拉菜单
|
||||
|
||||
**改进点**:
|
||||
- 更清晰的视觉层次
|
||||
- 图标 + 文字组合
|
||||
- 快捷键提示（tooltip）
|
||||
- 响应式布局适配
|
||||
|
||||
---
|
||||
|
||||
### 2. 全局快捷键系统
|
||||
|
||||
使用 `@vueuse/core` 的 `useMagicKeys` 实现：
|
||||
|
||||
| 快捷键 | 功能 | 实现方式 |
|
||||
|--------|------|---------|
|
||||
| `Ctrl/Cmd + Enter` | 运行测试 | executeTest() |
|
||||
| `Ctrl/Cmd + S` | 保存代码 | saveCode() |
|
||||
| `Shift + Alt + F` | 格式化代码 | formatCode() |
|
||||
| `F11` | 全屏模式 | toggleFullscreen() |
|
||||
| `Ctrl/Cmd + L` | 清空控制台 | clearConsoleLogs() |
|
||||
| `Ctrl/Cmd + R` | 重置代码 | loadTemplate() |
|
||||
| `Ctrl/Cmd + /` | 快捷键帮助 | showShortcutsHelp() |
|
||||
|
||||
**特点**:
|
||||
- 自动阻止浏览器默认行为（Ctrl+S保存、Ctrl+R刷新等）
|
||||
- Mac和Windows都支持
|
||||
- 实时响应，无延迟
|
||||
|
||||
---
|
||||
|
||||
### 3. 主题切换系统
|
||||
|
||||
**三种主题**:
|
||||
1. **Light** - 明亮主题（vs编辑器 + 浅色页面）
|
||||
2. **Dark** - 暗色主题（vs-dark编辑器 + 暗色页面）
|
||||
3. **High Contrast** - 高对比度（hc-black编辑器 + 暗色页面）
|
||||
|
||||
**同步切换**:
|
||||
- Monaco编辑器主题
|
||||
- Element Plus页面主题
|
||||
- 自动保存到localStorage
|
||||
|
||||
**切换方式**:
|
||||
- 点击工具栏主题下拉菜单
|
||||
- 图标随主题变化（Sunny/Moon/MostlyCloudy）
|
||||
|
||||
---
|
||||
|
||||
### 4. 可拖拽分栏布局
|
||||
|
||||
使用 `splitpanes` 库实现：
|
||||
|
||||
**布局结构**:
|
||||
```
|
||||
+------------------------------------------+
|
||||
| [代码编辑器] | [测试参数 + 结果] |
|
||||
| | |
|
||||
| 70% | 30% |
|
||||
| 可拖拽调整 ← → | |
|
||||
+------------------------------------------+
|
||||
```
|
||||
|
||||
**特点**:
|
||||
- 左右分栏可拖拽调整大小
|
||||
- 最小宽度限制（30% - 20%）
|
||||
- 平滑过渡动画
|
||||
- 响应式适配
|
||||
|
||||
---
|
||||
|
||||
### 5. 区域折叠功能
|
||||
|
||||
**可折叠的区域**:
|
||||
1. ✅ 右侧整体面板 - 折叠后编辑器占满全屏
|
||||
2. ✅ 测试参数卡片 - 独立折叠
|
||||
3. ✅ 测试结果卡片 - 独立折叠
|
||||
4. ✅ 控制台日志卡片 - 独立折叠
|
||||
5. ✅ 使用说明卡片 - 默认折叠
|
||||
|
||||
**折叠按钮**:
|
||||
- 卡片header右侧的箭头按钮
|
||||
- 右侧整体面板：左侧边缘的折叠按钮
|
||||
- 折叠后：固定的展开按钮
|
||||
|
||||
**状态持久化**:
|
||||
- 自动保存到localStorage
|
||||
- 页面刷新后保持折叠状态
|
||||
|
||||
---
|
||||
|
||||
### 6. 全屏模式
|
||||
|
||||
**实现方式**:
|
||||
- 使用 `@vueuse/core` 的 `useFullscreen`
|
||||
- 支持浏览器原生全屏API
|
||||
|
||||
**触发方式**:
|
||||
- F11快捷键
|
||||
- 工具栏全屏按钮
|
||||
- 图标随状态变化
|
||||
|
||||
**效果**:
|
||||
- 容器填充整个屏幕
|
||||
- 自动调整padding为0
|
||||
- z-index提升到最高层
|
||||
|
||||
---
|
||||
|
||||
### 7. 快捷键帮助弹窗
|
||||
|
||||
**内容**:
|
||||
- 表格形式展示所有快捷键
|
||||
- 功能名称 + 快捷键标签
|
||||
|
||||
**触发方式**:
|
||||
- Ctrl/Cmd + / 快捷键
|
||||
- 工具栏"更多"菜单中的"快捷键"选项
|
||||
|
||||
---
|
||||
|
||||
### 8. UI/UX改进
|
||||
|
||||
**视觉优化**:
|
||||
- 使用CSS变量适配明暗主题
|
||||
- 平滑的过渡动画（0.3s cubic-bezier）
|
||||
- 悬停效果优化
|
||||
- 按钮点击缩放反馈
|
||||
- 改进的滚动条样式
|
||||
|
||||
**交互优化**:
|
||||
- 控制台显示日志数量标签
|
||||
- JS日志特殊样式（绿色主题）
|
||||
- 卡片悬停阴影效果
|
||||
- 更好的视觉层次
|
||||
|
||||
**响应式设计**:
|
||||
- 移动端自动调整布局
|
||||
- 小屏幕优化
|
||||
- 触摸设备友好
|
||||
|
||||
---
|
||||
|
||||
## 🎨 新增的UI元素
|
||||
|
||||
### 工具栏
|
||||
- 运行按钮（CaretRight图标 + loading状态）
|
||||
- 按钮组（视觉分组）
|
||||
- 主题切换下拉菜单（带图标）
|
||||
- 全屏按钮
|
||||
- 更多操作菜单
|
||||
|
||||
### 折叠按钮
|
||||
- 右侧面板折叠按钮（蓝色浮动按钮）
|
||||
- 卡片折叠箭头（ArrowUp/ArrowDown）
|
||||
- 展开按钮（固定在右侧边缘）
|
||||
|
||||
### 状态指示
|
||||
- 控制台日志数量标签
|
||||
- 主题名称显示
|
||||
- 加载状态动画
|
||||
|
||||
---
|
||||
|
||||
## 🔧 技术实现
|
||||
|
||||
### 依赖库
|
||||
- `@vueuse/core` - 快捷键、全屏API
|
||||
- `splitpanes` - 可拖拽分栏
|
||||
- `element-plus` - UI组件库
|
||||
- `vue3-json-viewer` - JSON查看器
|
||||
|
||||
### 核心代码
|
||||
|
||||
**快捷键系统**:
|
||||
```javascript
|
||||
import { useMagicKeys, useFullscreen, useEventListener } from '@vueuse/core';
|
||||
|
||||
const keys = useMagicKeys();
|
||||
const ctrlEnter = keys['Ctrl+Enter'];
|
||||
|
||||
watch(ctrlEnter, (pressed) => {
|
||||
if (pressed) executeTest();
|
||||
});
|
||||
```
|
||||
|
||||
**折叠功能**:
|
||||
```javascript
|
||||
const collapsedPanels = ref({
|
||||
rightPanel: false,
|
||||
testParams: false,
|
||||
testResult: false,
|
||||
console: false,
|
||||
help: true
|
||||
});
|
||||
|
||||
const togglePanel = (panelName) => {
|
||||
collapsedPanels.value[panelName] = !collapsedPanels.value[panelName];
|
||||
localStorage.setItem('playground_collapsed_panels', JSON.stringify(collapsedPanels.value));
|
||||
};
|
||||
```
|
||||
|
||||
**主题切换**:
|
||||
```javascript
|
||||
const changeTheme = (themeName) => {
|
||||
const theme = themes.find(t => t.name === themeName);
|
||||
if (theme.page === 'dark') {
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
localStorage.setItem('playground_theme', themeName);
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 改进对比
|
||||
|
||||
| 特性 | 改进前 | 改进后 |
|
||||
|------|--------|--------|
|
||||
| 工具栏 | 简单按钮排列 | IDE风格分组工具栏 |
|
||||
| 布局 | 固定16:8比例 | 可拖拽调整Splitpanes |
|
||||
| 折叠 | 仅使用说明可折叠 | 所有区域可独立折叠 |
|
||||
| 快捷键 | 无 | 7个常用快捷键 |
|
||||
| 主题 | 跟随系统 | 3种主题自由切换 |
|
||||
| 全屏 | 无 | 支持F11全屏模式 |
|
||||
| 响应式 | 基础 | 完整的移动端适配 |
|
||||
| 动画 | 无 | 平滑的折叠/展开动画 |
|
||||
|
||||
---
|
||||
|
||||
## 🚀 如何使用新功能
|
||||
|
||||
### 主题切换
|
||||
1. 点击工具栏的主题按钮
|
||||
2. 选择Light/Dark/High Contrast
|
||||
3. 编辑器和页面同步切换
|
||||
|
||||
### 折叠面板
|
||||
1. 点击卡片header的箭头按钮折叠该卡片
|
||||
2. 点击右侧边缘的按钮折叠整个右侧面板
|
||||
3. 折叠后点击浮动按钮展开
|
||||
|
||||
### 调整布局
|
||||
1. 拖拽中间的分隔线调整左右比例
|
||||
2. 右侧面板折叠后编辑器自动占满
|
||||
|
||||
### 使用快捷键
|
||||
1. 按 `Ctrl+/` 查看所有快捷键
|
||||
2. 使用快捷键快速操作
|
||||
3. 工具提示会显示对应的快捷键
|
||||
|
||||
---
|
||||
|
||||
## 🎯 下一步
|
||||
|
||||
1. **重新编译前端**:
|
||||
```bash
|
||||
cd web-front
|
||||
npm run build
|
||||
```
|
||||
|
||||
2. **复制到部署目录**:
|
||||
```bash
|
||||
cp -r nfd-front/* ../webroot/nfd-front/
|
||||
```
|
||||
|
||||
3. **测试功能**:
|
||||
- 打开演练场页面
|
||||
- 测试所有快捷键
|
||||
- 测试主题切换
|
||||
- 测试折叠功能
|
||||
- 测试全屏模式
|
||||
- 测试拖拽调整布局
|
||||
|
||||
---
|
||||
|
||||
## 🐛 已知问题
|
||||
|
||||
无
|
||||
|
||||
---
|
||||
|
||||
## 💡 使用提示
|
||||
|
||||
1. **首次使用**: 点击"快捷键"按钮查看所有可用快捷键
|
||||
2. **调整布局**: 拖拽分隔线找到最适合你的布局
|
||||
3. **专注编码**: 折叠右侧面板获得更大编辑空间
|
||||
4. **保护眼睛**: 使用暗色主题减少疲劳
|
||||
5. **快速测试**: Ctrl+Enter直接运行，无需鼠标
|
||||
|
||||
---
|
||||
|
||||
**升级日期**: 2025-11-29
|
||||
**版本**: v2.0
|
||||
**状态**: ✅ 完成
|
||||
|
||||
Reference in New Issue
Block a user