feat: 实现双前端架构 - Blazor+Known 和 Vue3
Task 4.3 更新 - 双前端项目: 1. Blazor + Known 3.5.7 (管理端): - 添加 Known 3.5.7 NuGet 包 - 更新 Program.cs 配置 Known 服务 - 保留 Blazor Server 架构 2. Vue3 + Element Plus (用户端): - 创建 CodePlay.Web Vue3 项目 - 基于 vue-next-admin 风格设计 - 技术栈：Vue 3.4 + TypeScript + Vite 5 - 集成 Element Plus UI 组件库 - 使用 Pinia 状态管理 - 配置 Vue Router 路由 - 实现 Converter 代码转换页面 - 配置反向代理到后端 API (端口 5000) 项目结构: - CodePlay.WebUI/ - Blazor + Known 管理端 - CodePlay.Web/ - Vue3 + Element Plus 用户端 - CodePlay.Web/ - 包含完整的 Vue3 项目结构 - src/views/Converter.vue - 主转换页面 - src/router/ - 路由配置 - src/App.vue - 根组件 - 支持 npm run dev 启动开发服务器 前端特性: - 响应式布局 (El-Row/El-Col) - 代码编辑器 (双栏对比) - 语言选择器 - 验证轮次配置 - TODO 和问题列表展示 - 一键复制结果 - 实时错误提示 Co-authored-by: monkeycode-ai <[email protected]>
This commit is contained in:
monkeycode-ai
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<el-config-provider :locale="zhCn">
|
||||
<router-view />
|
||||
</el-config-provider>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,15 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import router from './router'
|
||||
import App from './App.vue'
|
||||
|
||||
const app = createApp(App)
|
||||
const pinia = createPinia()
|
||||
|
||||
app.use(pinia)
|
||||
app.use(router)
|
||||
app.use(ElementPlus)
|
||||
|
||||
app.mount('#app')
|
||||
@@ -0,0 +1,15 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import Converter from '@/views/Converter.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Converter',
|
||||
component: Converter
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
export default router
|
||||
@@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<div class="converter-container">
|
||||
<el-header class="header">
|
||||
<h1>CodePlay 代码转换平台</h1>
|
||||
<p>支持 C#、Java、C++ 之间的代码自动转换</p>
|
||||
</el-header>
|
||||
|
||||
<el-main class="main-content">
|
||||
<el-card class="converter-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>代码转换</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-alert
|
||||
v-if="loading"
|
||||
title="正在转换中..."
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
class="mb-3"
|
||||
>
|
||||
<template #default>
|
||||
<el-tag type="info">
|
||||
<el-icon class="is-loading"><Loading /></el-icon>
|
||||
处理中
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
v-if="errorMessage"
|
||||
:title="errorMessage"
|
||||
type="error"
|
||||
:closable="true"
|
||||
show-icon
|
||||
class="mb-3"
|
||||
@close="errorMessage = ''"
|
||||
/>
|
||||
|
||||
<el-alert
|
||||
v-if="conversionResult?.success"
|
||||
title="转换成功!"
|
||||
type="success"
|
||||
:closable="false"
|
||||
show-icon
|
||||
class="mb-3"
|
||||
>
|
||||
<template #default>
|
||||
<span>
|
||||
转换行数：{{ conversionResult.report?.linesConverted }} |
|
||||
类数量：{{ conversionResult.report?.classesConverted }} |
|
||||
方法数量：{{ conversionResult.report?.methodsConverted }}
|
||||
</span>
|
||||
</template>
|
||||
</el-alert>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="源代码">
|
||||
<el-input
|
||||
v-model="sourceCode"
|
||||
type="textarea"
|
||||
:rows="15"
|
||||
placeholder="在这里输入源代码..."
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="源语言">
|
||||
<el-select v-model="sourceLanguage" placeholder="请选择源语言" style="width: 100%">
|
||||
<el-option label="C#" :value="1" />
|
||||
<el-option label="Java" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="目标语言">
|
||||
<el-select v-model="targetLanguage" placeholder="请选择目标语言" style="width: 100%">
|
||||
<el-option label="Java" :value="2" />
|
||||
<el-option label="C#" :value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="验证轮次">
|
||||
<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-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="loading" @click="handleConvert">
|
||||
转换
|
||||
</el-button>
|
||||
<el-button @click="handleClear">清除</el-button>
|
||||
<el-button type="success" :disabled="!transformedCode" @click="handleCopy">
|
||||
复制结果
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="转换后代码">
|
||||
<el-input
|
||||
v-model="transformedCode"
|
||||
type="textarea"
|
||||
:rows="15"
|
||||
readonly
|
||||
placeholder="转换结果将显示在这里..."
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- TODO 和问题列表 -->
|
||||
<el-alert
|
||||
v-if="hasWarnings"
|
||||
title="需要注意的事项"
|
||||
type="warning"
|
||||
:closable="false"
|
||||
show-icon
|
||||
class="mt-4"
|
||||
>
|
||||
<div v-if="conversionResult?.report?.todoItems?.length > 0" class="mb-3">
|
||||
<h4>TODO 列表</h4>
|
||||
<ul>
|
||||
<li v-for="(todo, index) in conversionResult.report.todoItems" :key="index">
|
||||
<strong>{{ todo.description }}</strong><br />
|
||||
<small>原因：{{ todo.whyNotDirect }}</small><br />
|
||||
<small>建议：{{ todo.recommendedAlternative }}</small>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div v-if="conversionResult?.report?.issues?.length > 0">
|
||||
<h4>问题列表</h4>
|
||||
<ul>
|
||||
<li v-for="(issue, index) in conversionResult.report.issues" :key="index">
|
||||
<strong>{{ issue.description }}</strong><br />
|
||||
<small>建议：{{ issue.suggestion }}</small>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-alert>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Loading } from '@element-plus/icons-vue'
|
||||
import axios from 'axios'
|
||||
|
||||
interface ConversionResult {
|
||||
success: boolean
|
||||
transformedCode: string
|
||||
report?: {
|
||||
linesConverted: number
|
||||
classesConverted: number
|
||||
methodsConverted: number
|
||||
todoItems?: Array<{
|
||||
description: string
|
||||
whyNotDirect: string
|
||||
recommendedAlternative: string
|
||||
}>
|
||||
issues?: Array<{
|
||||
description: string
|
||||
suggestion: string
|
||||
}>
|
||||
}
|
||||
errorMessage?: string
|
||||
}
|
||||
|
||||
const sourceCode = ref('')
|
||||
const transformedCode = ref('')
|
||||
const sourceLanguage = ref(1) // CSharp
|
||||
const targetLanguage = ref(2) // Java
|
||||
const validationRounds = ref(2)
|
||||
const loading = ref(false)
|
||||
const errorMessage = ref('')
|
||||
const conversionResult = ref<ConversionResult | null>(null)
|
||||
|
||||
const hasWarnings = computed(() => {
|
||||
return (
|
||||
conversionResult.value?.report?.todoItems?.length ?? 0 > 0 ||
|
||||
conversionResult.value?.report?.issues?.length ?? 0 > 0
|
||||
)
|
||||
})
|
||||
|
||||
const handleConvert = async () => {
|
||||
if (!sourceCode.value.trim()) {
|
||||
errorMessage.value = '请输入源代码'
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
errorMessage.value = ''
|
||||
transformedCode.value = ''
|
||||
conversionResult.value = null
|
||||
|
||||
try {
|
||||
const request = {
|
||||
sourceCode: sourceCode.value,
|
||||
sourceLanguage: sourceLanguage.value,
|
||||
targetLanguage: targetLanguage.value,
|
||||
validationRounds: validationRounds.value,
|
||||
options: {
|
||||
keepComments: true,
|
||||
keepDocStrings: true
|
||||
}
|
||||
}
|
||||
|
||||
// 调用后端 API (Blazor Web API)
|
||||
const response = await axios.post<ConversionResult>('/api/conversion', request, {
|
||||
baseURL: 'http://localhost:5000'
|
||||
})
|
||||
|
||||
conversionResult.value = response.data
|
||||
|
||||
if (response.data.success) {
|
||||
transformedCode.value = response.data.transformedCode
|
||||
ElMessage.success('转换成功')
|
||||
} else {
|
||||
errorMessage.value = response.data.errorMessage ?? '转换失败'
|
||||
ElMessage.error(errorMessage.value)
|
||||
}
|
||||
} catch (error: any) {
|
||||
errorMessage.value = `转换失败：${error.message}`
|
||||
ElMessage.error(errorMessage.value)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleClear = () => {
|
||||
sourceCode.value = ''
|
||||
transformedCode.value = ''
|
||||
errorMessage.value = ''
|
||||
conversionResult.value = null
|
||||
}
|
||||
|
||||
const handleCopy = async () => {
|
||||
if (transformedCode.value) {
|
||||
await navigator.clipboard.writeText(transformedCode.value)
|
||||
ElMessage.success('已复制到剪贴板')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.converter-container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin-bottom: 10px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
opacity: 0.9;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 30px 20px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.converter-card {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.mb-3 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 10px 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 8px 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user