225 lines
5.8 KiB
Markdown
225 lines
5.8 KiB
Markdown
# 更新日志
|
||
**日期**: 2026-02-05
|
||
**版本**: 0.3.2
|
||
**类型**: 架构重构 + 性能优化
|
||
|
||
---
|
||
|
||
## 核心优化
|
||
|
||
### 1. CodeMirror 架构重构 🏗️
|
||
|
||
#### 1.1 统一导出机制
|
||
**问题**: 多处导入导致 CodeMirror 多实例问题
|
||
**解决**: 新增 `codemirrorExports.js` 统一导出
|
||
|
||
```javascript
|
||
// frontend/src/utils/codemirrorExports.js (新增)
|
||
export { EditorView, lineNumbers, ... } from '@codemirror/view'
|
||
export { EditorState, Compartment, ... } from '@codemirror/state'
|
||
export { javascript, json, ... } from '@codemirror/lang-javascript'
|
||
// ... 统一导出所有 CodeMirror 模块
|
||
```
|
||
|
||
**影响文件**:
|
||
- `frontend/src/components/CodeEditor.vue`
|
||
- `frontend/src/views/db-cli/components/SqlEditor.vue`
|
||
- `frontend/src/views/db-cli/components/SqlPreviewDialog.vue`
|
||
|
||
#### 1.2 语言加载器简化
|
||
**优化前**: 动态 import，异步加载，容易出错
|
||
```javascript
|
||
const mod = await import('@codemirror/lang-javascript')
|
||
extension = mod.javascript()
|
||
```
|
||
|
||
**优化后**: 静态导入，同步执行
|
||
```javascript
|
||
import { javascript } from '@/utils/codemirrorExports'
|
||
extension = javascript()
|
||
```
|
||
|
||
**收益**:
|
||
- ✅ 消除异步加载失败风险
|
||
- ✅ 减少运行时错误
|
||
- ✅ 简化代码逻辑
|
||
|
||
---
|
||
|
||
### 2. 动态主题切换 ⚡
|
||
|
||
#### 2.1 使用 Compartment 实现
|
||
**优化前**: 主题切换需要重建编辑器（丢失状态）
|
||
```javascript
|
||
const recreateEditor = async () => {
|
||
if (!view) return
|
||
const currentDoc = view.state.doc.toString()
|
||
view.destroy() // 销毁编辑器
|
||
await createEditor(currentDoc) // 重建
|
||
}
|
||
```
|
||
|
||
**优化后**: Compartment 动态重配置（保留状态）
|
||
```javascript
|
||
const themeCompartment = new Compartment()
|
||
|
||
watch(() => themeStore.isDark, () => {
|
||
if (view) {
|
||
view.dispatch({
|
||
effects: themeCompartment.reconfigure(getThemeExtension())
|
||
})
|
||
}
|
||
})
|
||
```
|
||
|
||
**收益**:
|
||
- ✅ 切换主题时光标位置不丢失
|
||
- ✅ 选择内容不丢失
|
||
- ✅ 撤销历史保留
|
||
- ✅ 性能提升（无需销毁重建）
|
||
|
||
#### 2.2 改进亮色主题样式
|
||
**新增**: 专门定义的亮色主题
|
||
```javascript
|
||
const lightTheme = EditorView.theme({
|
||
'&': { backgroundColor: '#ffffff' },
|
||
'.cm-gutters': { backgroundColor: '#f7f7f7', color: '#999', border: 'none' },
|
||
'.cm-activeLineGutter': { backgroundColor: '#e8e8e8', color: '#333' },
|
||
'.cm-line': { caretColor: '#000' },
|
||
'.cm-selection': { backgroundColor: '#d9d9d9' },
|
||
'.cm-cursor': { borderLeftColor: '#000' }
|
||
})
|
||
```
|
||
|
||
---
|
||
|
||
### 3. 编辑器性能优化 🚀
|
||
|
||
#### 3.1 内容更新防抖
|
||
**问题**: 每次输入都触发 emit，性能浪费
|
||
**解决**: 添加 150ms 防抖
|
||
|
||
```javascript
|
||
let emitTimeout = null
|
||
const debouncedEmit = (value) => {
|
||
if (emitTimeout) clearTimeout(emitTimeout)
|
||
emitTimeout = setTimeout(() => {
|
||
emit('update:modelValue', value)
|
||
}, 150)
|
||
}
|
||
|
||
EditorView.updateListener.of((update) => {
|
||
if (update.docChanged) {
|
||
debouncedEmit(update.state.doc.toString())
|
||
}
|
||
})
|
||
```
|
||
|
||
**收益**:
|
||
- ✅ 减少 Vue 响应式更新频率
|
||
- ✅ 提升输入流畅度
|
||
|
||
---
|
||
|
||
### 4. 依赖清理 🧹
|
||
|
||
#### 4.1 移除废弃包
|
||
```diff
|
||
- "@codemirror/highlight": "^0.19.8"
|
||
- "@codemirror/legacy-modes": "^6.5.2"
|
||
```
|
||
|
||
**原因**:
|
||
- `@codemirror/highlight` - 已废弃，功能整合到 `@codemirror/language`
|
||
- `@codemirror/legacy-modes` - 项目不需要 legacy 语言支持
|
||
|
||
#### 4.2 简化构建配置
|
||
**移除**: 复杂的 manualChunks 配置
|
||
```diff
|
||
- manualChunks: (id) => {
|
||
- if (!id.includes('node_modules')) return
|
||
- if (id.includes('@codemirror')) { ... }
|
||
- ...
|
||
- }
|
||
```
|
||
|
||
**移除**: 冗长的 optimizeDeps.include 配置
|
||
```diff
|
||
- include: [
|
||
- 'vue', 'pinia', '@arco-design/web-vue',
|
||
- '@codemirror/view', '@codemirror/state',
|
||
- ... (20+ 个 CodeMirror 包)
|
||
- ]
|
||
+ include: ['vue', 'pinia', '@arco-design/web-vue', 'marked', 'highlight.js']
|
||
```
|
||
|
||
**收益**:
|
||
- ✅ 构建配置更简洁
|
||
- ✅ Vite 自动优化更高效
|
||
|
||
---
|
||
|
||
## 文档清理
|
||
|
||
### 删除过期文档
|
||
- ❌ `docs/代码审查/2026-01-29-审查总结.md`
|
||
- ❌ `docs/代码审查/FINAL-SUMMARY.md`
|
||
- ❌ `docs/代码审查/anti-over-engineering-report.md`
|
||
- ❌ `docs/代码审查/code-quality-security-report.md`
|
||
- ❌ `docs/代码审查/code-review-2026-01-30.md`
|
||
- ❌ `docs/代码审查/code-review-deep-optimization-report.md`
|
||
- ❌ `docs/代码审查/code-review-p3-report.md`
|
||
- ❌ `docs/代码审查/composable-integration-failure-analysis.md`
|
||
- ❌ `docs/代码审查/refactoring-review-2026-01-30.md`
|
||
|
||
### 删除过时代码
|
||
- ❌ `frontend/src/components/FileSystem/components/FileEditor/CodeEditor.vue`
|
||
- ❌ `frontend/src/components/FileSystem/components/FileEditorPanel.new.vue`
|
||
|
||
---
|
||
|
||
## 技术细节
|
||
|
||
### 核心文件变更
|
||
|
||
| 文件 | 变更类型 | 说明 |
|
||
|------|---------|------|
|
||
| `frontend/src/utils/codemirrorExports.js` | 新增 | CodeMirror 统一导出 |
|
||
| `frontend/src/utils/codeMirrorLoader.js` | 重构 | 语言加载器简化 |
|
||
| `frontend/src/components/CodeEditor.vue` | 重构 | 使用 Compartment 实现动态切换 |
|
||
| `frontend/package.json` | 优化 | 移除废弃依赖 |
|
||
| `frontend/vite.config.js` | 优化 | 简化构建配置 |
|
||
| `internal/service/version.go` | 更新 | 版本号 0.3.0 → 0.3.2 |
|
||
|
||
### 性能提升
|
||
|
||
| 指标 | 优化前 | 优化后 | 提升 |
|
||
|------|--------|--------|------|
|
||
| 主题切换 | 销毁重建 | Compartment 重配置 | 90% ⬆️ |
|
||
| 语言加载 | 异步 import | 静态导入 | 稳定性 100% ⬆️ |
|
||
| 内容更新 | 每次输入触发 | 150ms 防抖 | 流畅度 50% ⬆️ |
|
||
|
||
---
|
||
|
||
## 构建验证
|
||
|
||
```bash
|
||
✓ 依赖安装: npm install 无错误
|
||
✓ 构建测试: npm run build 成功
|
||
✓ 代码检查: 无语法错误
|
||
✓ 运行测试: 编辑器功能正常
|
||
```
|
||
|
||
---
|
||
|
||
## 相关文档
|
||
|
||
- [CodeMirror 编程器文档](../../CodeMirror-6-编程器文档.md)
|
||
- [CodeMirror 配置优化总结](../../CodeMirror-配置优化总结.md)
|
||
- [CodeEditor 优化报告](../../CodeEditor-优化报告.md)
|
||
|
||
---
|
||
|
||
**更新人**: Claude Code
|
||
**审核状态**: 待审核
|