feat: 完成第一批高优先级任务 (Task 4.5, 4.7, 7.3)

Task 4.5 - 转换界面完善:
- ConverterView.vue: 完整转换界面
- 集成 Monaco Editor 代码编辑器
- 语言选择器 (C#/Java)
- 验证轮次选择 (1-3 轮)
- 转换结果显示
- 转换报告弹窗 (TODO 和问题)
- 光标位置显示
- 复制结果功能
- 状态栏统计

Task 4.7 - 项目管理界面:
- ProjectView.vue: 项目管理页面
- 项目列表展示
- 新建项目对话框
- 项目详情和转换历史
- 项目删除功能
- 路由配置更新

Task 7.3 - 数据库持久化:
- CodePlay.Persistence 项目创建
- AppDbContext: SQLite DbContext
- ConversionReport 和 ProjectInfo 数据模型
- DatabaseStorageService: IReportStorageService 实现
- 支持报告存储、查询、删除
- 统计信息聚合
- AddPersistence 扩展方法

测试：42 个测试（41 通过，1 跳过）✅

新增文件:
- CodePlay.Web/src/views/ConverterView.vue
- CodePlay.Web/src/views/ProjectView.vue
- CodePlay.Persistence/AppDbContext.cs
- CodePlay.Persistence/DatabaseStorageService.cs
- CodePlay.Web/src/router/index.ts (更新)
Co-authored-by: monkeycode-ai <[email protected]>

CodePlay.Web/src/views/ConverterView.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="converter-view">
+    <el-container>
+      <!-- 顶部工具栏 -->
+      <el-header class="toolbar">
+        <el-row :gutter="20" align="middle">
+          <el-col :span="4">
+            <h2>代码转换</h2>
+          </el-col>
+          <el-col :span="5">
+            <el-select v-model="sourceLanguage" placeholder="源语言" style="width: 100%">
+              <el-option label="C# (CSharp)" value="CSharp" />
+              <el-option label="Java" value="Java" />
+            </el-select>
+          </el-col>
+          <el-col :span="2">
+            <el-icon><Right /></el-icon>
+          </el-col>
+          <el-col :span="5">
+            <el-select v-model="targetLanguage" placeholder="目标语言" style="width: 100%">
+              <el-option label="C# (CSharp)" value="CSharp" />
+              <el-option label="Java" value="Java" />
+            </el-select>
+          </el-col>
+          <el-col :span="4">
+            <el-select v-model="validationRounds" placeholder="验证轮次" style="width: 100%">
+              <el-option label="1 轮验证" :value="1" />
+              <el-option label="2 轮验证" :value="2" />
+              <el-option label="3 轮验证" :value="3" />
+            </el-select>
+          </el-col>
+          <el-col :span="4">
+            <el-button type="primary" @click="convert" :loading="converting" icon="Refresh">
+              转换
+            </el-button>
+          </el-col>
+        </el-row>
+      </el-header>
+
+      <el-container class="main-content">
+        <!-- 左侧源代码编辑器 -->
+        <el-main class="editor-panel">
+          <div class="panel-header">
+            <span>源代码 ({{ sourceLanguage }})</span>
+            <el-tag size="small">{{ cursorPosition.lineNumber }}:{{ cursorPosition.column }}</el-tag>
+          </div>
+          <CodeEditor
+            ref="sourceEditor"
+            v-model="sourceCode"
+            :language="sourceLanguage.toLowerCase()"
+            @change="onSourceCodeChange"
+            @cursorChange="onCursorChange"
+          />
+        </el-main>
+
+        <!-- 右侧转换结果编辑器 -->
+        <el-main class="editor-panel">
+          <div class="panel-header">
+            <span>转换结果 ({{ targetLanguage }})</span>
+            <el-button size="small" @click="copyResult" icon="DocumentCopy">复制</el-button>
+          </div>
+          <CodeEditor
+            ref="targetEditor"
+            v-model="targetCode"
+            :language="targetLanguage.toLowerCase()"
+            :read-only="true"
+          />
+        </el-main>
+      </el-container>
+
+      <!-- 底部状态栏 -->
+      <el-footer class="status-bar">
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <span v-if="conversionResult">
+              <el-icon><SuccessFilled /></el-icon>
+              转换成功：{{ conversionResult.report?.linesConverted }} 行
+            </span>
+          </el-col>
+          <el-col :span="6">
+            <span v-if="conversionResult">
+              类：{{ conversionResult.report?.classesConverted }} | 
+              方法：{{ conversionResult.report?.methodsConverted }}
+            </span>
+          </el-col>
+          <el-col :span="6">
+            <span v-if="conversionResult?.report?.todoItems?.length">
+              <el-icon><Warning /></el-icon>
+              TODO: {{ conversionResult.report.todoItems.length }}
+            </span>
+          </el-col>
+          <el-col :span="6">
+            <span v-if="conversionResult">耗时：{{ conversionDuration }}ms</span>
+          </el-col>
+        </el-row>
+      </el-footer>
+    </el-container>
+
+    <!-- 转换结果对话框 -->
+    <el-dialog v-model="showReportDialog" title="转换报告" width="800px">
+      <el-descriptions :column="2" border>
+        <el-descriptions-item label="转换行数">{{ conversionResult?.report?.linesConverted }}</el-descriptions-item>
+        <el-descriptions-item label="转换类数">{{ conversionResult?.report?.classesConverted }}</el-descriptions-item>
+        <el-descriptions-item label="转换方法数">{{ conversionResult?.report?.methodsConverted }}</el-descriptions-item>
+        <el-descriptions-item label="耗时">{{ conversionDuration }}ms</el-descriptions-item>
+      </el-descriptions>
+
+      <h4>不可转换语法 (需要人工处理)</h4>
+      <el-table :data="conversionResult?.report?.todoItems" stripe>
+        <el-table-column prop="description" label="描述" />
+        <el-table-column prop="whyNotDirect" label="原因" />
+        <el-table-column prop="recommendedAlternative" label="建议替代方案" />
+      </el-table>
+
+      <h4>警告和问题</h4>
+      <el-table :data="conversionResult?.report?.issues" stripe>
+        <el-table-column prop="description" label="描述" />
+        <el-table-column prop="suggestion" label="建议" />
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Right, Refresh, DocumentCopy, SuccessFilled, Warning } from '@element-plus/icons-vue'
+import CodeEditor from '../components/CodeEditor.vue'
+
+const sourceLanguage = ref('CSharp')
+const targetLanguage = ref('Java')
+const validationRounds = ref(2)
+const sourceCode = ref('')
+const targetCode = ref('')
+const converting = ref(false)
+const conversionResult = ref<any>(null)
+const conversionDuration = ref(0)
+const showReportDialog = ref(false)
+const cursorPosition = ref({ lineNumber: 1, column: 1 })
+
+const sourceEditor = ref<InstanceType<typeof CodeEditor>>()
+const targetEditor = ref<InstanceType<typeof CodeEditor>>()
+
+const onSourceCodeChange = (code: string) => {
+  sourceCode.value = code
+}
+
+const onCursorChange = (position: { lineNumber: number; column: number }) => {
+  cursorPosition.value = position
+}
+
+const convert = async () => {
+  if (!sourceCode.value.trim()) {
+    ElMessage.warning('请输入源代码')
+    return
+  }
+
+  converting.value = true
+  const startTime = Date.now()
+
+  try {
+    const response = await fetch('/api/conversion/convert', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        sourceCode: sourceCode.value,
+        sourceLanguage: sourceLanguage.value,
+        targetLanguage: targetLanguage.value,
+        validationRounds: validationRounds.value,
+        options: {
+          keepComments: true,
+          keepDocStrings: true,
+          keepFormatting: true,
+          indentSize: 4,
+          useTabs: false,
+          enableAutoFix: true
+        }
+      })
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+    }
+
+    const result = await response.json()
+    
+    targetCode.value = result.transformedCode || ''
+    conversionResult.value = result
+    conversionDuration.value = Date.now() - startTime
+
+    ElMessage.success('转换成功')
+
+    if (result.report?.todoItems?.length > 0 || result.report?.issues?.length > 0) {
+      showReportDialog.value = true
+    }
+  } catch (error: any) {
+    ElMessage.error(`转换失败：${error.message}`)
+  } finally {
+    converting.value = false
+  }
+}
+
+const copyResult = async () => {
+  if (targetCode.value) {
+    await navigator.clipboard.writeText(targetCode.value)
+    ElMessage.success('已复制到剪贴板')
+  }
+}
+</script>
+
+<style scoped>
+.converter-view {
+  height: 100vh;
+  background: #f5f7fa;
+}
+
+.toolbar {
+  background: white;
+  border-bottom: 1px solid #e4e7ed;
+  display: flex;
+  align-items: center;
+}
+
+.main-content {
+  padding: 20px;
+  gap: 20px;
+}
+
+.editor-panel {
+  background: white;
+  border-radius: 4px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.panel-header {
+  padding: 10px 15px;
+  border-bottom: 1px solid #e4e7ed;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fafafa;
+}
+
+.editor-container {
+  flex: 1;
+  min-height: 500px;
+}
+
+.status-bar {
+  background: white;
+  border-top: 1px solid #e4e7ed;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  font-size: 13px;
+  color: #606266;
+}
+</style>