mirror of
https://github.com/qaiu/netdisk-fast-download.git
synced 2026-01-11 17:04:13 +00:00
更新Playground和JsHttpClient相关功能，整理文档结构
This commit is contained in:
q
176
web-front/doc/MONACO_EDITOR_NPM.md
Normal file
176
web-front/doc/MONACO_EDITOR_NPM.md
Normal file
@@ -0,0 +1,176 @@
|
||||
# Monaco Editor NPM包配置说明
|
||||
|
||||
## ✅ 已完成的配置
|
||||
|
||||
### 1. NPM包安装
|
||||
已在 `package.json` 中安装：
|
||||
- `monaco-editor`: ^0.55.1 - Monaco Editor核心包
|
||||
- `@monaco-editor/loader`: ^1.4.0 - Monaco Editor加载器
|
||||
- `monaco-editor-webpack-plugin`: ^7.1.1 - Webpack打包插件（devDependencies）
|
||||
|
||||
### 2. Webpack配置
|
||||
在 `vue.config.js` 中已配置：
|
||||
```javascript
|
||||
new MonacoEditorPlugin({
|
||||
languages: ['javascript', 'typescript', 'json'],
|
||||
features: ['coreCommands', 'find'],
|
||||
publicPath: process.env.NODE_ENV === 'production' ? './' : '/'
|
||||
})
|
||||
```
|
||||
|
||||
### 3. 组件配置
|
||||
在 `MonacoEditor.vue` 和 `Playground.vue` 中已配置：
|
||||
```javascript
|
||||
// 配置loader使用本地打包的文件，而不是CDN
|
||||
if (loader.config) {
|
||||
const vsPath = process.env.NODE_ENV === 'production'
|
||||
? './js/vs' // 生产环境使用相对路径
|
||||
: '/js/vs'; // 开发环境使用绝对路径
|
||||
|
||||
loader.config({
|
||||
paths: {
|
||||
vs: vsPath
|
||||
}
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔍 工作原理
|
||||
|
||||
### 打包流程
|
||||
1. `monaco-editor-webpack-plugin` 在构建时将 Monaco Editor 文件打包到 `js/vs/` 目录
|
||||
2. `@monaco-editor/loader` 通过配置的路径加载本地文件
|
||||
3. 不再从 CDN（如 `https://cdn.jsdelivr.net`）加载
|
||||
|
||||
### 文件结构（构建后）
|
||||
```
|
||||
nfd-front/
|
||||
├── js/
|
||||
│ └── vs/
|
||||
│ ├── editor/
|
||||
│ ├── loader/
|
||||
│ ├── base/
|
||||
│ └── ...
|
||||
└── index.html
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🧪 验证方法
|
||||
|
||||
### 1. 检查网络请求
|
||||
打开浏览器开发者工具 → Network标签：
|
||||
- ✅ 应该看到请求 `/js/vs/...` 或 `./js/vs/...`
|
||||
- ❌ 不应该看到请求 `cdn.jsdelivr.net` 或其他CDN域名
|
||||
|
||||
### 2. 检查构建产物
|
||||
```bash
|
||||
cd web-front
|
||||
npm run build
|
||||
ls -la nfd-front/js/vs/
|
||||
```
|
||||
应该看到 Monaco Editor 的文件被打包到本地。
|
||||
|
||||
### 3. 离线测试
|
||||
1. 断开网络连接
|
||||
2. 访问 Playground 页面
|
||||
3. ✅ 编辑器应该正常加载（因为使用本地文件）
|
||||
4. ❌ 如果使用CDN，编辑器会加载失败
|
||||
|
||||
---
|
||||
|
||||
## 📝 修改的文件
|
||||
|
||||
1. ✅ `web-front/src/components/MonacoEditor.vue`
|
||||
- 添加了 `loader.config()` 配置，明确使用本地路径
|
||||
|
||||
2. ✅ `web-front/src/views/Playground.vue`
|
||||
- 在 `initMonacoTypes()` 中添加了相同的配置
|
||||
|
||||
3. ✅ `web-front/vue.config.js`
|
||||
- 添加了 `publicPath` 配置，确保路径正确
|
||||
|
||||
---
|
||||
|
||||
## 🚀 部署
|
||||
|
||||
### 开发环境
|
||||
```bash
|
||||
cd web-front
|
||||
npm install # 确保依赖已安装
|
||||
npm run serve
|
||||
```
|
||||
访问 `http://127.0.0.1:6444/playground`，编辑器应该从本地加载。
|
||||
|
||||
### 生产环境
|
||||
```bash
|
||||
cd web-front
|
||||
npm run build
|
||||
```
|
||||
构建后，Monaco Editor 文件会打包到 `nfd-front/js/vs/` 目录。
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ 注意事项
|
||||
|
||||
### 1. 文件大小
|
||||
Monaco Editor 打包后会增加构建产物大小（约2-3MB），但这是正常的。
|
||||
|
||||
### 2. 首次加载
|
||||
- 开发环境：文件从 webpack dev server 加载
|
||||
- 生产环境：文件从本地 `js/vs/` 目录加载
|
||||
|
||||
### 3. 缓存
|
||||
浏览器会缓存 Monaco Editor 文件，更新后可能需要清除缓存。
|
||||
|
||||
---
|
||||
|
||||
## 🔧 故障排查
|
||||
|
||||
### 问题：编辑器无法加载
|
||||
**检查**：
|
||||
1. 确认 `npm install` 已执行
|
||||
2. 检查浏览器控制台是否有错误
|
||||
3. 检查 Network 标签，确认文件路径是否正确
|
||||
|
||||
### 问题：仍然从CDN加载
|
||||
**解决**：
|
||||
1. 清除浏览器缓存
|
||||
2. 确认 `loader.config()` 已正确配置
|
||||
3. 检查 `vue.config.js` 中的 `publicPath` 配置
|
||||
|
||||
### 问题：构建后路径错误
|
||||
**解决**：
|
||||
- 检查 `publicPath` 配置
|
||||
- 确认生产环境的相对路径 `./js/vs` 正确
|
||||
|
||||
---
|
||||
|
||||
## ✅ 优势
|
||||
|
||||
1. **离线可用** - 不依赖外部CDN
|
||||
2. **加载速度** - 本地文件通常比CDN更快
|
||||
3. **版本控制** - 使用固定版本的Monaco Editor
|
||||
4. **安全性** - 不依赖第三方CDN服务
|
||||
5. **稳定性** - CDN故障不影响使用
|
||||
|
||||
---
|
||||
|
||||
**配置状态**: ✅ 已完成
|
||||
**验证状态**: ⚠️ 待测试
|
||||
**建议**: 运行 `npm run build` 并检查构建产物
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
309
web-front/doc/PLAYGROUND_UI_UPGRADE.md
Normal file
309
web-front/doc/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
|
||||
**状态**: ✅ 完成
|
||||
|
||||
1
web-front/doc/UI_FIXES.md
Normal file
1
web-front/doc/UI_FIXES.md
Normal file
@@ -0,0 +1 @@
|
||||
|
||||
Reference in New Issue
Block a user